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上传文件：

//保存上传图片后返回的idvar 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方法是刷新页面    }});