问题：

如何在浏览器端上传文件（单个文件/文件夹）到服务器？

浏览器：firefox

服务器：虚拟机ubuntu18

1.前端 <li><a href="#" onclick='openFileDialog()'>选择图片路径</a></li> <li><input type="file" id="folder2images" style="display: none" onchange='fileSelected()'webkitdirectory/></li>

补充：如只想上传单个文件，就把webkitdirectory去掉

2.js function openFileDialog(){ $("#folder2images").click();}function fileSelected(){ var file=document.getElementById("folder2images").files; console.log(file) startFileUpload(file);}//开始上传function startFileUpload(file){ var uploadURL = "FilesUploadServer";//手工构造一个form对象 var formData = new FormData(); for(var i=0;i<file.length;i++){ formData.append("file" , file[i]);// 'file' 为HTTP Post里的字段名, file 对浏览器里的File对象;注意：此处如果上传的是文件夹，不能直接formData.append("file" , file);这样后台会接收不到文件 }//手工构造一个请求对象，用这个对象发送表单数据//设置 progress, load, error, abort 4个事件处理器 var request = new XMLHttpRequest(); request.upload.addEventListener("progress" , window.evt_upload_progress , false); request.addEventListener("load", window.evt_upload_complete, false); request.addEventListener("error", window.evt_upload_failed, false); request.addEventListener("abort", window.evt_upload_cancel, false); request.open("POST", uploadURL ); // 设置服务URL request.send(formData); // 发送表单数据}window.evt_upload_progress = function(evt){ if(evt.lengthComputable) { var progress = Math.round(evt.loaded * 100 / evt.total); console.log("上传进度" + progress); }};window.evt_upload_complete = function (evt){ if(evt.loaded == 0) { console.log ("上传失败!"); } else { console.log ("上传完成!"); //var response = JSON.parse(evt.target.responseText); var response=evt.target.responseText; console.log ("response: "+response); }};window.evt_upload_failed = function (evt){ console.log ("上传出错");};window.evt_upload_cancel = function (evt){ console.log( "上传中止!");}; 3.后端 @RequestMapping(value="/FilesUploadServer") public @ResponseBody String FilesUploadServer(@RequestParam(value = "file")MultipartFile[] files){//前后端参数传递时，名称不一样可以用@RequestParam String fileName = null; String msg = ""; if (files != null && files.length >0) { for(int i =0 ;i< files.length; i++){ try { fileName = files[i].getOriginalFilename(); byte[] bytes = files[i].getBytes(); File file = new File("**自己的路径**"+"/" + fileName); File fileParent = file.getParentFile(); if(!fileParent.exists()){ fileParent.mkdirs(); } file.createNewFile(); BufferedOutputStream buffStream = new BufferedOutputStream(new FileOutputStream(new File("**自己的路径**"+"/" + fileName))); buffStream.write(bytes); buffStream.close(); msg += "You have successfully uploaded " + fileName; } catch (Exception e) { return "You failed to upload " + fileName + ": " + e.getMessage(); } } return msg; } else { return "Unable to upload. Files is empty."; } }

4.结果

以上传文件3.txt为例：

 

至此上传文件成功！