使用jQuery HTML5和FormData上传文件(示例)

・1 分钟阅读

在HTML5之前,jQuery有许多技术和插件来实现Ajax文件上传,HTML5引入了可以简化文件上传的FormData类。


$('#myform').on('sumbit', function(){
 var form = $(this);
 var formdata = false;
 if (window.FormData){
 formdata = new FormData(form[0]);
 }

 var formAction = form.attr('action');
 $.ajax({
 url : '/upload',
 data : formdata ? formdata : form.serialize(),
 cache : false,
 contentType : false,
 processData : false,
 type : 'POST',
 success : function(data, textStatus, jqXHR){
 // Callback code
 }
 });
});

就这样,你不需要任何插件,flash或iframe技巧。它只是可以工作。这里有一些技巧使这些代码按照我们期望的方式工作:

  • 当我们创建FormData的实例时,我们传递form [0]而不是form。它的意思是实际的表单元素,但不是jQuery选择器。
  • 不定义contentType,我们只传递false。这告诉jQuery不要向请求中添加Content-Type头,
  • 我们将processData设置为false,因此,jquery不会将我们的data值(在FormData的立场上)转换为字符串,

开心编码!

学以致用 profile image