Ajax实现多文件上传，以及后端接收文件并写到硬盘

Ajax实现多文件上传

前端代码

```html
<p>上传进度：<span id="span1">0%</span></p>
<form id="body" enctype="multipart/form-data">
    <input type="file" name="file" ><br/>
    <input type="file" name="file" ><br/>
    <input type="file" name="file" ><br/>
    <input type="file" name="file" ><br/>
</form>
<button id="button">上传文件</button>
<script>
    $(document).ready(function () {
        $("#button").click(function () {
            upFiles();
        })

        function upFiles() {
            var formData = new FormData(document.getElementById("body"));
            $.ajax({
                url: '${PATH}/upload',
                data: formData,
                datatype: 'json',
                processData: false,
                contentType: false,
                async: true,
                type: 'POST',
                success: function (data) {
                    console.log("success:"+data);
                },
                error: function (error) {
                    alert("error" + error);
                },
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    xhr.upload.addEventListener('progress', function (evt) {
                        var loaded = evt.loaded;
                        var total = evt.total;
                        var percent = loaded / total * 100;
                        $('#span1').text(percent.toFixed(2)+'%');
                        if(percent===100){
                            $('#span1').text('上传完成');
                        }
                    }, false);
                    return xhr;
                }
            })
        }
    })
</script>

**后端代码**
	

```java
import org.springframework.stereotype.Controller;
import org.springframework.util.FilecopyUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.multipartfile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.servletexception;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.List;
import java.util.UUID;

@Controller
public class FileUploadController {
    @GetMapping("upload")
    public void upload(HttpServletRequest request, HttpServletResponse response) throws servletexception, IOException {
        request.getRequestdispatcher("upload.jsp").forward(request, response);
    }

    @PostMapping("upload")
    @ResponseBody
    public String upfile(HttpServletRequest request) throws IOException {
        List<multipartfile> files = ((MultipartHttpServletRequest) request).getFiles("file");
        String msg = "";
        if (files.size()==0) {
            msg = "文件上传失败";
            return msg;
        }
        int i=4;
        for (multipartfile mu : files) {
            if(!mu.isEmpty()){
                InputStream inputStream = mu.getInputStream();
                String newName = UUID.randomUUID() + mu.getoriginalFilename();
                File file = new File("/upload/files/"+ newName);
                System.out.println(file.getAbsolutePath());
                if(!file.getParentFile().exists()){
                    file.getParentFile().mkdirs();
                }
                FileOutputStream outputStream = new FileOutputStream(file);
                FilecopyUtils.copy(inputStream, outputStream);
               i--;
            }
        }
        if(i==4){
            msg = "文件上传失败";
        }else{
            msg=4-i+"个文件上传完成";

        }
        return msg;
    }
}

注意在配置文件中修改上传的最大文件大小，以及单次上传的文件大小

#设置上传最大文件数
spring.servlet.multipart.max-request-size=10000MB
#单次上传最大数
spring.servlet.multipart.max-file-size=1000MB