formData多文件同时上传（附件上传功能）

前言

项目中需要做个附件上传功能，最开始要求单个附件上传，后面要求多个附件上传

多文件上传解决办法

html代码：

<form action="/upload/saveUpload" id="domeform" method="post" enctype="multipart/form-data">
			    <input style="opacity: 1;" type="file" name="file" id="uploads" value="上传附件" multiple="multiple"> 
			    <input style="opacity: 1;font-family: 'iconfont' !important;height: 28px; width: 108px;font-size: 14px;padding: 0px;" type="button" class="bear-btn" value="上传附件" id="ajaxsub" onclick="toUpload()">     
			form>

我为了文件上传的按钮在各个浏览器中显示的样式一致用了一个input标签遮挡了上传的input框。
注意点：
1. enctype=“multipart/form-data” 此属性为设置支持选中多个文件
2. 附件的input框必须设置name属性
js如下:

    function toUpload(){
    	$('#uploads').click();
    }
     function upload(){
        var formData = new FormData();
        var files = $("#uploads");
        for (var i = 0; i < files[0].files.length; i++) {
            formData.append("file", files[0].files[i]);
        }
        $.ajax({
            url: "/upload/saveUpload",
            type: "POST",
            data:formData,
            dataType: "json",
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function (res) {
            	if(res.status=="success"){
            		$("#uploads").val("");
            	}
            }
        })
    }
     $(function(){
    	    //判断是否为ie浏览器
    	    if('onpropertychange' in document.documentElement){
    	       $('#uploads').bind('propertychange', upload);
    	    }else{
    	        $('#uploads').bind('change', upload);
    	    }
    	})

由于ie中input的onchange方法不生效，所以此处判断了是否为ie，改为propertychange方法调用。
注意点：
1.formData.append(“file”, files[0].files[i]);key的值要和后台接收属性名称保持一致
java controller后台接收代码如下：

   /**
     * 用于接收前端上传文件
     * @param request
     * @param file
     * @return 
     */
    @RequestMapping(value = "saveUpload", method = RequestMethod.POST)
    @ResponseBody
    public String dome1(HttpServletRequest request,@RequestParam("file") MultipartFile[] file) CurrentUser currentUser) throws Exception{
     
    return "{\"status\":\"success\",\"message\":\"" + "附件保存成功！" + "\"}";
    }

接收后可对file数组进行遍历得到想要的文件数据。
注意点：
1.多文件上传务必加注解@RequestParam(“file”)，名称和前台保持一致
2.MultipartFile[] file，用数组接收名称和前台保持一致

扩展

1.ie10以上版本才支持formData,如果要兼容建议使用ajaxSubmit。
2.如果要做单文件上传修改如下几点
2.1 js部分

     function upload(){
     
        var formdata = new window.FormData($("#domeform")[0]);
        $.ajax({
     
            url: "/upload/saveUpload",
            type: "POST",
            data:formdata,
            dataType: "json",
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function (res) {
     
            	if(res.status=="success"){
     
            		$("#uploads").val("");
            		initNode();
            	}
            }
        })
    }

2.2 后台接收参数部分

   /**
     * 用于接收前端上传文件
     * @param request
     * @param file
     * @return 
     */
    @RequestMapping(value = "saveUpload", method = RequestMethod.POST)
    @ResponseBody
    public String dome1(HttpServletRequest request,MultipartFile file) CurrentUser currentUser) throws Exception{
     
    return "{\"status\":\"success\",\"message\":\"" + "附件保存成功！" + "\"}";
    }