通过jQuery Ajax使用FormData对象上传文件

        今天使用wex5做文件上传，并不使用wex5本身提供的文件上传插件（如图），就采取formData结合Ajax来实现文件的上传。

要实现该功能一般有两种方式。

第一种：

使用<form>表单初始化FormData对象方式上传文件。如下：

html代码：

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button" value="上传"></button>
</form>

js代码：（稍微注意一下，这个是代码是wex5提交的，因为有跨域的问题，所以ajax稍微有点不同）

var url = "http://0.0.0.0:8081/upload";
    //获取select组件选中的值
    var fileType = this.comp("fileType").val();
    var file = $("#file")[0];
    //创建一个formData的空对象对象
    var formData = new FormData();
    formData.append("file", file);
    formData.append("fileType",fileType);
    $.ajax({
	type : "post",
	url : url,
	data : formData,
	global : false,
	// 告诉jQuery不要去处理发送的数据
	processData : false,
	// 告诉jQuery不要去设置Content-Type请求头
	contentType : false,
	dataType : "json",
	async : false,
	"complete" : function(xhr) {
	    if (xhr.readyState == 4 && xhr.status == 200) {
	        console.log("成功！");
	        justep.Util.hint("文件上传成功！");
	    } else {
	        console.log("失败！");
	        justep.Util.hint("文件上传失败！");
	    }
        }
});

一般如下就可以了：

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false,
    dataType : "text"
    success : function(responsText){},
    error : function(){}
})；

W3c提供了三种方案来获取或修改FormData。

方案1：创建一个空的FormData对象，然后再用append方法逐个添加键值对：

var formdata = new FormData();

formdata.append("name", "hello");

方案2：取得form元素对象，将它作为参数传入FormData对象中

var formobj =  document.getElementById("form");

var formdata = new FormData(formobj);

方案3：利用form元素对象的getFormData方法生成它

var formobj =  document.getElementById("form");

var formdata = formobj.getFormData()

这里要注意几点：

1. processData设置为false。因为data值是FormData对象，不需要对数据做处理。
2. <form>标签添加enctype="multipart/form-data"属性。
3. cache设置为false，上传文件不需要缓存。
4. contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false。
5. 上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。

第二种：

不使用<form>表单，直接提交。

html代码：（注意我这里没有<form>标签，也没有enctype="multipart/form-data"属性）

 <input id="file" type="file" name="file"/>
 <button id="upload" type="button" value="上传"></button>

js代码：

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: 'http://loacalhsot:8083/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
    dataType : "text"
    success : function(responsText){},
    error : function(){}
})

注意：

1. append()的第二个参数应是文件对象，即$('#file')[0].files[0]。
2. append()的第二个参数应不是文件对象时：formData.append("fileType",1234);
3. contentType也要设置为‘false’。
4. 从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，
5. 只需要在<input type="file">里添加multiple或multiple="multiple"属性。

多文件上传：

html代码：

选择文件：<input type="file" multiple="true" name="file" id="file" style="width: content-box;"/>

js代码：

 var formData = new FormData();
 for (var i = 0; i < $('#file')[0].files.length; i++) {
     // alert($('#file')[0].files[i]);
     formData.append('file', $('#file')[0].files[i]);
 }
$.ajax({
    url: '/batchUpload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false,
    dataType: "text",
    async: false,
    success: function (responsText) {},
    error: function () {}    
});

后台代码：（springboot的，其他框架也是大同小异）

到此就OK了