html示例内容如下:
<form action="" method="post" enctype="multipart/form-data" id="formBox">
<section>
<label>
<span class="user-category">头像</span>
</label>
<input type="file" accept=".jpg,.gif,.png,.bmp" name="file" id="file" class="upload-img">
</section>
</form>
直接使用FormData提交文件的话,不带参数可以用下面的方法:
var form = new FormData(document.getElementById("formBox"));
$.ajax({
url: url,
type: "post",
data: form,
processData: false,
contentType: false,
success: function (data) {
},
error: function (e) {
console.log(e);
}
});
FormData的数据会自动组织成multipart/form-data形式的,因此不需要JQuery进行转化了,因此contentType,processData为false。
但是上面这种方法不适合带参数的,如果上传还要求带上参数的话,可以使用如下方法:
var option={
url:url,
method:"post",
data:{
a:'web'
},
success:function(data){
console.log(data);
}
};
$("#formBox").ajaxSubmit(option);
这种方法带上参数了,而文件的参数名为<input type="file" name="file">中定义的name名,要修改参数名只需要在这里name名。