文件上傳的動作不能太俗，必須頁面無刷新上傳

人生永遠沒有太晚的開始

　　好久沒有更新博客了，說實話，每天抽空打開博客園總感覺心里很空虛，不是沒有在修行，而是因為最近在跟着博老前輩完成一項很重要的使命——打造屬於我們自己的奇遇帝國，好了廢話不多說，首先我在北京向各位帶好，希望各位能在2018年達到自己預設的人生高度。

常規操作上傳文件

<form action="xxx.action" method="post" enctype="multipart/form-data">
    <input type="file" name="userfile" multiple><br>
    <input type="submit" value="上傳">
4 </form>

　　點擊那個誘人的submit按鈕上傳，OK，完成！相信很多大佬還在用上面這種簡單粗暴的方式完成文件上傳的動作，哥哥，都什么時代了，還用這種方式，如果提交這樣的代碼上去，臉都會被打腫，我們要的是頁面無刷新上傳哦，哈哈哈~~~~

頁面無刷新上傳文件

　　完成這項優雅的操作，首先是有必要認識一下XMLHttpRequest對象的，XMLHttpRequest是一個 API，它為客戶端提供了在客戶端和服務器之間傳輸數據的功能。它提供了一個通過 URL 來獲取數據的簡單方式，並且不會使整個頁面刷新。這使得網頁只更新一部分頁面而不會打擾到用戶。XMLHttpRequest 在 AJAX 中被大量使用。說到這里就有人說，你賣了半天關子，不就是異步上傳嘛，ajax誰不會，分分鍾的事兒就優雅的完成了，但是我想說ajax固然重要也依然能很好的完成這個動作，有時候專業的事情交給專業的人去做效果是非常好的。

接下來我強調一點，因為我們接下來討論的XMLHttpRequest指的是XMLHttpRequest Level 2，因為XMLHttpRequest Level 1有如下限制：

• 僅支持文本數據傳輸, 無法傳輸二進制數據.
• 傳輸數據時, 沒有進度信息提示, 只能提示是否完成.
• 受瀏覽器 同源策略 限制, 只能請求同域資源.
• 沒有超時機制, 不方便掌控ajax請求節奏.

但是XMLHttpRequest Level 2針對這些缺陷做出良好的改進：

• 支持二進制數據, 可以上傳文件, 可以使用FormData對象管理表單.
• 提供進度提示, 可通過 xhr.upload.onprogress 事件回調方法獲取傳輸進度.
• 依然受 同源策略 限制, 這個安全機制不會變. XHR2新提供 Access-Control-Allow-Origin 等headers, 設置為 * 時表示允許任何域名請求, 從而實現跨域CORS訪問(有關CORS詳細介紹請耐心往下讀).
• 可以設置timeout 及 ontimeout, 方便設置超時時長和超時后續處理.

目前, 主流瀏覽器基本上都支持XMLHttpRequest Level 2, 除了IE系列需要IE10及更高版本. 因此IE10以下是不支持XHR2的.

要碼運行

整個上傳的動作概括為一句話就是：這里提到的FormData就是我們最常用的一種方式，通過在腳本里新建FormData對象，把File對象設置到表單項中，然后利用XMLHttpRequest異步上傳到后台服務器即可，就很簡單的完成真個優雅的動作。

<!-- XMLHttpRequest實現異步上傳文件 -->
<input type="file" name="userfile" onchange="fileSelected(this);" multiple/>

<script type="text/javascript">
    function fileSelected(userfile) {
        uploadFile(userfile);
    }
    function uploadFile(userfile) {
        var fd = new FormData();         //FormData對象
        var length = userfile.files.length;        //獲取選中文件的個數(單文件直接追加即可)
        for(var i=0; i<length; i++){
            fd.append("userfile", userfile.files[i]);    //多文件追加到FormData
        }
        //fd.append("userfile", userfile.files[0]);        //單文件追加到FormData
        var xhr = new XMLHttpRequest();       //XMLHttpRequest對象
        xhr.open("POST", "${qy }/upload/uploadFiles");      //初始化一個請求
        // 注意：所有相關的事件綁定必須在調用send()方法之前進行.
        xhr.send(fd);//發送請求. 如果該請求是異步模式(默認),該方法會立刻返回. 相反,如果請求是同步模式,則直到請求的響應完全接受以后,該方法才會返回.
    }
</script>

     /**
     * 多文件上傳
     * @param file
     * @return
     * @throws Exception
     */
    @RequestMapping(value="/uploadFiles",method=RequestMethod.POST)
    @ResponseBody
    public String uploadFiles(@RequestParam("userfile")MultipartFile[] file) throws Exception{
        int fileNumber = file.length;
        if(fileNumber == 0){
            logger.info("上傳內容為空");
            return "請選擇文件";
        }else{

 

參考

XMLHttpRequest API：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

優秀博客URL：http://louiszhai.github.io/2016/11/02/ajax/