ajax使用FormData对象实现批量文件上传（前后端）

前端代码：
html部分

<div  id="notice-text">
                <button type="button"  id="selectImgBtn"><span
                        class="glyphicon glyphicon-plus"></span>选择
                </button>
                <button type="button"  id="deleteImgBtn"><span
                        class="glyphicon glyphicon-trash"></span>删除
                </button>
                <button type="button"  id="uploadImgBtn"><span
                        class="glyphicon glyphicon-upload"></span>上传
                </button>
                <form id="uploadImageForm">
                    <input type="file" id="imageInput" multiple="multiple" class="hide" accept="image/jpeg,image/x-png,*.jpg,*.png">
                </form>
                    <div id="previewImgList">
                        <#--<img id="previewImg" width="100%">-->
                    </div>
            </div>

var uploadImgFiles=[];
$().ready(function () {
// ------------------ 为input设置change事件 ------------------
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲imageInput").ch…(this));
var imgObj=$(this).get(0);
for(var i=0;i<imgObj.files.length;i++){
var fileReader = new FileReader();
var index=containFile(imgObj.files[i]);
if(index!=-1){//如果重复了就更新
uploadImgFiles[i]=imgObj.files[i];
}else{//如果不重复则追加
uploadImgFiles.push(imgObj.files[i]);
}

            var fileName=imgObj.files[i].name;
            var id=imgObj.files[i].name+imgObj.files[i].type;//文件的id由名称大小类型组成，唯一表示此文件
            fileReader.readAsDataURL(imgObj.files[i]);
            fileReader.onload = function (ev) {
                if(index!=-1){//如果重复就更新
                        $("#"+id).find("img").attr("src",ev.target.result);
                }else{
                    //增加元素
                    $("#previewImgList").append("<div style='width:100%;text-align:center' id='"+id+"'> <img width='100%' name='"+fileName+"' title='"+fileName+"'src='"+ev.target.result+"'></img>"
                            +"<lable>"+fileName+"</lable> <a href='javascript:void(0)' name='删除' onclick='removeImg(this)'>  删除  </a>"
                            +"</div>");
                }
            }
        }
    })

    
    //-------------------删除按钮事件---------------------------
    $("#deleteImgBtn").click(function () {
        $("#imageInput").val('');
        $('#previewImgList').empty();//清空所有图片
        uploadImgFiles.splice(0,uploadImgFiles.length);//清空数组
    })
    //-------------------上传按钮事件---------------------------
    $("#uploadImgBtn").click(function () {
        //var imgFile = $("#imageInput").get(0).files[0];
        if (uploadImgFiles == null || uploadImgFiles.length<1) {
            $.alert("请选择图片！");
            return;
        } else {
            var formData = new FormData();
            for(var i=0;i<uploadImgFiles.length;i++){
                formData.append("file[]",uploadImgFiles[i]);
            }

            formData.append("itpArchivesId", itpArchivesId);
            formData.append("typeCode", typeCode);

            $.ajax({
                url: '${req.contextPath}/upload/batchUploadImage',
                type: 'post',
                data: formData,
                async: false,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data);
                    if (data.success == false) {
                        $.alert(data.info);
                    } else {
                        $.alert("成功！");
                        $("#imageInput").val('');
                        $("#previewImg").removeAttr("src");
                        $("#previewImg").hide();
                        $("#uploadModal").modal('hide');
                        clearFileInfos();
                        initTable();
                    }
                }
            })
        }
    })
    //选择图片按钮
    $("#selectImgBtn").click(function () {
        $("#imageInput").trigger('click');
    })

})

function removeImg(obj){
var imgDivObj=$(obj).parent();
var imgId=imgDivObj.attr(“id”);
for(var i=0;i<uploadImgFiles.length;i++){
var id=uploadImgFiles[i].name+uploadImgFiles[i].type;//文件的id由名称大小类型组成，唯一表示此文件
if(imgId==id){
uploadImgFiles.splice(i,1);//清除数组的内容
imgDivObj.remove();//清除元素
return;
}
}
}

后端代码：
 /**
     * 通用批量图片附件上传方法
     * @param files
     * @param itpArchivesId
     * @param typeCode
     * @param tgtId
     * @param user
     * @return
     * @throws IOException
     */
    @RequestMapping(value = "/batchUploadImage")
    @ResponseBody
    public JSONObject batchUploadImage(@RequestParam("file")MultipartFile[] files,
                                       @RequestParam("itpArchivesId")String itpArchivesId,
                                       @RequestParam("typeCode")Integer typeCode,
                                       @RequestParam(value = "tgtId",required = false,defaultValue = "")String tgtId,
                                       @ModelAttribute("user")User user, HttpServletRequest request) throws IOException {
        JSONObject result = new JSONObject(); //结果json
        StringBuilder webPaths=new StringBuilder();
        MultiValueMap<String, MultipartFile> fileMap=((MultipartHttpServletRequest)request).getMultiFileMap();
        if(fileMap != null && !fileMap.isEmpty()){
            for (Map.Entry<String, List<MultipartFile>> entity : fileMap.entrySet()) {
                List<MultipartFile> fileList=entity.getValue();
                for(MultipartFile file:fileList){
                    //获取文件的二进制码
                    byte[] bytes = file.getBytes();

                    
                }
            }
        }

    }