html+js+springboot实现多文件上传

1、html部分

<!--input[button] 触发 file click事件-->
<input type="button" value="选择文件" id="mybutton" class="mybtn" onclick="Id('file').click();" />
<!--file 隐藏起来 触发onchange事件-->
<input type="file" name="file" accept="image/png,image/jpg,image/jpeg" multiple="multiple"  id="file" style="display:none;" />
<!--上传文件 触发upload事件-->
<input type="button" value="上传文件" id="uploadbutton" class="myuploadbtn" onclick="upload()" />

2、js部分

//定义id选择器
function Id(id) {
	return document.getElementById(id);
}

//多个文件同时上传
function upload() {

    var formData = {};
    formData = new FormData();
    var file= document.getElementById('file');
    var files = file.files;
    var len = files.length;

    for (var i = 0; i < len; i++) {
        formData.append('uploadFile', files[i]);
    }
    jQuery.ajax({
        type: 'post',
        url: "http://localhost:8080/multiUpload",
        data: formData,
        async : true,
        contentType: false,
        processData: false,
        success: function (data) {         
            console.log(data);
        },
        error: function () {
        }
    })
}

3、SpringBoot部分

    @RequestMapping(value = "/multiUpload", method = RequestMethod.POST)
    @ResponseBody
    public String multiImport(@RequestParam("uploadFile") MultipartFile[] uploadFile) {
        System.out.println(uploadFile.length); 
        for (MultipartFile multipartFile:uploadFile) {
            System.out.println("文件:"+multipartFile.getOriginalFilename());
            s.append(multipartFile.getOriginalFilename()+" ");
        }
        
        return “上传成功”;
    }