Rails里给文件上传添加progress_bar

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

首先给form_for添加一个onsubmit事件，并在form_for下紧跟一个显示progress_bar的div：
[code]
<% 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>
[/code]
这样，在form提交之前隐藏表单，并显示progress_bar，直到form提交完成，页面跳转
[img]http://hideto.iteye.com/upload/attachment/25636/70ab70f8-4d11-33dd-b029-c47966370ca2.jpg[/img]
[img]http://hideto.iteye.com/upload/attachment/25638/448a9240-6e8f-34c1-b547-e71ccc1de276.jpg[/img]