Rails里给文件上传添加progress_bar

文件上传很慢时，UI没有什么用户提示，这样让人很费解，所以我们可以给文件上传添加一个动态而美观的progress_bar

首先给form_for添加一个onsubmit事件，并在form_for下紧跟一个显示progress_bar的div：

<% form_for(:asset, :url => assets_path, :html => { :multipart => true, :onsubmit => "show_progress_bar(this);" }) do |f| %>
  <p>
    <b>上传文件</b><br />
    <%= f.file_field :uploaded_data %>
  </p>

  <p>
    <%= submit_tag "提交" %>
  </p>
<% end %>
<div class="progress_bar_div" id="progress_bar_div" style="display: none;">
	<dl>
		<dt>正在上传中，请稍候...</dt>
		<dd>
			<span><em id="progress_bar" style="left:200px"></em></span>
		</dd>
	</dl>
</div>

<script>
	function show_progress_bar(x) {
		x.setAttribute("style", "display: none;");
		document.getElementById("progress_bar_div").setAttribute("style", "display: inline;");
	}
</script>

这样，在form提交之前隐藏表单，并显示progress_bar，直到form提交完成，页面跳转

评论

2 楼 hideto 2008-06-19  

it's a gif animation

1 楼 leondu 2008-06-19  

你这样只是显示一个静态的图片，那个progress_bar是静止的，哪里有“动态”效果呢？