单文件上传

先简单来定义一个表单，注意加enctype=“multipart/form-data”，表示是上传组件

<form enctype="multipart/form-data" id="formData">MultipartFile:<input type="file" name="file" id="fileName1"/><br><div id="progress">0%</div><input id="submit" placeholder="提交"/>
</form>

定义js
可能有的小伙伴会报错 FormData constructor: Argument 1 does not implement interface HTMLFormElement.原因是不能这样写var a = $("#formData");可能这和js底层代码有关，不能适配。不深究。

<script type="text/javascript">(function () {$("#submit").click(function () {upFiles();})function upFiles() {//不能这样写var a = $("#formData");var a = document.getElementById("formData");//封装成一个表单数据var formData = new FormData(a);$.ajax({//后端接口url: 'upFileOne',//上传的文件data: formData,//响应返回的结果类型datatype: 'json',//下面俩个参数加上processData: false,contentType: false,//异步请求才能显示进度async: true,//请求方式type: 'POST',//请求成功后的回调success: function (renponse) {console.log("success" + renponse)},//请求失败后的回调error: function (error) {console.log("error" + error)},//处理上传进度xhr: function () {//ajax其实也就是对xhr的封装，这里自己设置底层的xhrvar xhr = $.ajaxSettings.xhr();//给上传组件添加监听器 progress固定写法xhr.upload.addEventListener('progress', function (evt) {var loaded = evt.loaded;var total = evt.total;var percent = loaded / total * 100;//显示进度$('#progress').html(percent.toFixed(2) + "%");//toFixed小数位是2位}, false);return xhr;}})}})()
</script>

后端用流来接收，没啥好说的。注意自己在c盘下面创建一个a1872文件夹，当然路劲可以改

/*** @param* @return* @function 上传文件，字节是逐个读取的*/@Overridepublic Boolean saveFile(MultipartFile multipartFile) {String originalFilename = multipartFile.getOriginalFilename();String path = "C:/a1872/" + originalFilename;FileOutputStream fileOutputStream = null;InputStream inputStream = null;try {inputStream = multipartFile.getInputStream();byte[] bytes = new byte[1024];int read = 0;fileOutputStream = new FileOutputStream(path);while (read != -1) {read = inputStream.read(bytes);fileOutputStream.write(read);}} catch (IOException e) {e.printStackTrace();return false;} finally {try {fileOutputStream.close();inputStream.close();} catch (IOException e) {e.printStackTrace();}}return true;}

测试

多文件上传

从请求中拿到所有的文件，逐个保存就行了。

   /*** @param* @return* @function 上传多个文件*/@PostMapping("/upFileMany")public String upFile(HttpServletRequest request) {//1:把请求转换为，多文件请求MultipartRequest multipartRequest = (MultipartRequest) request;//2：从中获取多文件上传的fileMapMap<String, MultipartFile> fileMap = multipartRequest.getFileMap();//3：获取多文件Collection<MultipartFile> multipartFiles = fileMap.values();for (MultipartFile file : multipartFiles) {fileI.saveFile(file);}return "upFileManyHtml";}

完整代码链接https://github.com/zhangzihang3/upfiles.git