使用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
的立场上)转换为字符串,
开心编码!