文件的上傳方式

前提：服務器提供文件上傳Controller，如：

@RestController
public class FileUploadController {

    @PostMapping("/upload")
    public boolean itemImport(@RequestParam MultipartFile file) throws Exception{

        if (file.isEmpty()) {
            return false;
        }

        return true;
    }

}

1. 表單提交

<form action="/upload" method="post" enctype="multipart/form-data">
        選擇文件:<input type="file" name="file" /><br />
        <input type="submit" value="上傳" />
 </form>

不須要寫js代碼，表單提交會致使頁面跳轉，提交成功後，會轉到路徑‘/upload’ 對應的view！（該例子中，頁面展現true）

2. ajax方式提交（基於XMLHttpRequest對象和onclick方法）

選擇文件:<input type="file" id="file1" /><br />
 <input type="button" onclick="UploadFile()" value="上傳" />

function UploadFile() {
    var fileObj = document.getElementById("file1").files[0]; // 獲取文件對象
    var FileController = "/upload";                    // 接收上傳文件的後臺地址
    // FormData 對象
    var form = new FormData();
    form.append("file", fileObj);                           // 文件對象
    // XMLHttpRequest 對象
    var xhr = new XMLHttpRequest();
    xhr.open("post", FileController, true);
    xhr.onload = function () {
        alert("上傳完成!");
    };
    xhr.send(form);

}

3. ajax方式提交（使用jQuery的$.ajax接口）

選擇文件:<input type="file" id="file1" /><br />
  <input type="button" id="upload" value="上傳" />

$("#upload").click(function () {
    var fileObj = document.getElementById("file1").files[0];
    var formData = new FormData();
    formData.append("file", fileObj);
    $.ajax({
        type: 'post',
        url: "/upload",
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
    }).success(function (data) {
        alert(data);
    }).error(function () {
        alert("上傳失敗");
    });
});