form-data形式上传图片

1、数据要求：form-data

2、input标签：

<input type='file' accept='image/*' id='imgFile' multiple/>  //上传多张图片加multiple属性

3、获取一张图片并传给后端：

var imgFile = document.getElementById("imgFile").files[0];    // 1）获取文件，使用jquery：$("#imgFile")[0].files[0];
...
var form  = new FormData();   // 2）创建实例对象
...
form.append('img',imgFile);   // 3）使用from.append的方式添加参数
	$.ajax({
		method: 'post',
		data: form,   // 4）传参
		contentType: false,   // 5）将contentType设置为false
		processData: false,   // 6）将processData设置为false
		url: '/fileData/postData.do',
		success: function(res){
			console.log(res);	
		},
		error: function(e){
			console.log(e);
		},
})

4、获取多张图片并传给后端：

// 1)定义全局变量
var imgFiles; 
...
/*
*	jquery:
*	var imgs= $('#imgFile')[0].files.length;
*		for(var i = 0; i< imgs;i++){
*			 imgFiles[i] = $('#imgFile')[0].files[i];
*		}
*/
// 2)获取文件
var imgObj = document.getElementById('imgFile'); 
var imgs = imgObj.files.length;   
	for(var i = 0;i<imgs;i++){
		imgFiles[i] = imgObj.files[i];
	}

...
// 3)上传
var form  = new FormData(); 
for(var i = 0;i<imgFiles.length;i++){
	form.append('img'+i,imgFiles[i]);   // 多个图片上传append第一个参数不能一样,否则后面的图片会覆盖前面的，最后结果只能得到最后一张图片
}
	$.ajax({
		method: 'post',
		data: form,   // 4）传参
		contentType: false,   // 5）将contentType设置为false
		processData: false,   // 6）将processData设置为false
		mimeType:'multipart/form-data',  // 7)
		url: '/fileData/postData.do',
		success: function(res){
			console.log(res);	
		},
		error: function(e){
			console.log(e);
		},
	})