welcome to xlongwei.com

欢迎大家一起学习、交流、分享


QQ:9167702333 邮箱:admin@xlongwei.com

FormData 轻松实现异步文件上传


分类 Java   关键字 分享   标签 java   web   发布 hongwei  1456901222038
注意 转载须保留原文链接,译文链接,作者译者等信息。  
传统的form表单提交时会刷新页面,若要避免刷新我们需要使用ajax方式提交,此时就算是$( '#form').serialize()序列化也无法支持文件上传,于是XMLHttpRequest Level 2添加了一个新的接口FormData来支持异步上传文件。

button不会提交表单
<form action="/upload/direct.html" method="post" enctype="multipart/form-data">
<input type="file" name="file" class="{required:true}">
<input type="button" class="btn btn-default" value="异步"><a href="" target="_blank"></a>
</form>

button点击时触发异步上传,FormData支持包含file类型的表单封装
$("input[type='button']").click(function(){
if(!$("form").valid()) return; //未选择文件时返回
var formData = new FormData($("form")[0]); //[0]访问dom对象
jQuery.ajax({
url:"/upload/direct.html",
type:"POST",
data:formData,
async:true,
cache:false,
contentType:false,
processData:false,
success:function(data) {
var paths = data.split(",");
console.log(paths[0]+paths[1]);
$("input[type='button']").next("a").attr("href",paths[0]+paths[1]).text("预览");
$("input[type='file']").val("");
},
error:function(data) { console.log(data); }
});
});

表单上传:支持提交表单并刷新,也支持异步上传并预览
异步上传:需要插件支持,支持批量上传


demo地址:http://cms.xlongwei.com/demo/upload.html
参考网址:http://yunzhu.iteye.com/blog/2177923