问题:
如何在浏览器端上传文件(单个文件/文件夹)到服务器?
浏览器: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为例:
至此上传文件成功!