Ajax使用FormData对象上传文件

 一：网上查到的归纳

    FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。

var formData = new FormData();
formata.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

• processData设置为false。因为data值是FormData对象，不需要对数据做处理。
• <form>标签添加enctype="multipart/form-data"属性。
• cache设置为false，上传文件不需要缓存。
  
  

  服务器端读文件

  从Servlet 3.0 开始，可以通过 request.getPart() 或 request.getPars() 两个接口获取上传的文件。
  这里不多说，详细请参考官网教程 Uploading Files with Java Servlet Technology 以及示例 The fileupload Example Application

  二：使用

  1、多个input上传文件：

//保存上传图片后返回的id
var json={};
//多个input的name均设置为id_card
$(document).on("change","input[name='id_card']",function(){
    var $this = this;
    var formData = new FormData();
	formData.append('file', this.files[0]);
	$.ajax({
	    url:  "${api}/upload_image",
	    type: "POST",
	    cache: false,
	    data: formData,
	    processData: false,
	    contentType: false
	}).done(function(res) {
		json[$this.id]=res.file_id;
		$($this).prev().attr('src',res.image_url);//刷新img
		$.cookie($this.id, res.image_url);//将返回的图片url保存到cookie，防止丢失
	}).fail(function(res) {alert("上传失败");});
	});

2、一个input上传多个文件：

需要在<input type="file">里添加multiple或multiple="multiple"属性

$(document).on("change","input[name='work_card']",function(){
    var $this = this;
    var pre = 'work_card_file_id';//json中key的前缀

//我手动限制同时只能传3张
if(this.files.length>3){
	$.modal({
            text: "同时最多只能选择3张照片",
            buttons: [
                {
                    text: '确定',
                }
            ]
        });
		return;
    }

//因为我需要每张图片的返回信息，所以设置async:false(反之如果设置成异步，文件会全部上传
完才返回值，此时只返回了最后一个文件的相应信息。)
    for(var i=0;i<this.files.length;i++){
    	var formData = new FormData();
    	formData.append('file', this.files[i]);
    	$.ajax({
    	    url:  "${api}/upload_image",
    	    type: "POST",
    	    cache: false,
    	    data: formData,
    	    processData: false,
    	    async:false,
    	    contentType: false
    	}).done(function(res) {
    		json[pre+(i+1)]=res.file_id;
    		$.cookie(pre+(i+1), res.image_url);
    	}).fail(function(res) {alert("上传失败");
    	}).always((function(res) {getCookie();}));//getCookie方法是刷新页面

    }
	});