＜input type=“file“＞上传文件到服务器

问题：

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

浏览器：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为例：

 

至此上传文件成功！