Google Reader

Javascript实现GMail无刷新文件上传

by Yuanyi ZHANG

at 2010-10-03 15:32:50

original http://www.letrails.cn/archives/javascript%e5%ae%9e%e7%8e%b0gmail%e6%97%a0%e5%88%b7%e6%96%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0/

最近需要给抢答增加文件上传支持，但是个人不喜欢Flash方式，Google了一下，找到这篇实现异步上传的文章，讲的比较清楚。

要实现类似GMail的无刷新文件上传，原理其实很简单，就是将form的target设置为一个iframe，这样当表单提交后刷新的就是那个iframe，而不是form所在的页面，然后再通过Javascript获取iframe内的响应，并将结果展示给用户。


<%= form_for :photo, :html => {:id => 'photo_upload', :multipart => true, :target => 'upload_target'} do |f| %>
<%= f.file_field :file, {:id => 'file_upload', nchange => '$('#photo_upload').submit();'} %>
<%= end %>
<iframe id="upload_target" name="upload_target" style="width:0;height:0;border:0px solid #fff;"></iframe>


就像上面的代码，当用户选择文件后，表单会自动提交，响应会显示在那个隐藏的iframe里面，如果想要告诉用户上传是否成功（比如是否超出尺寸限制等），就需要读取iframe内的数据，可以让Rails返回JSON格式的结果，然后通过JS直接读取。


# Rails代码
respond_to do |wants|
if @photo.save
wants.html {render :text => {:result => 'success', bject => @photo}.to_json }
else
wants.html {render :text => {:result => 'failed', :errors => @photo.errors}.to_json}
end
end


下面是JS代码，需要为iframe绑定onload方法，这样只有当文件上传结束后，JS才会被调用。


$(function(){
$("upload_target").load(function(){
var result = $('#upload_target').contents.find("body").html();
var data = eval("("+result+")");
if(data['result'] != 'success') {
alert("上传成功！");
} else {
alert("上传失败：" + data['errors'][0][1].join());
}
});
});


下面是抢答的Demo，不支持IE，IE请点这里看完整表单。

无觅猜您也喜欢：
配置ActionMailer使用GMail发送邮件	Plotr：轻量级的Javascript制图库	Aptana IDE: 全新开源Ruby+Rails+JavaScript+HTML工作台	Javascript on Junction: 客户端的RoR
无觅