javascript 使用FormData實現圖片/文件異步上傳

主要思路：

在html中添加上傳按鈕，爲了方便，這裏使用<img>作爲上傳按鈕，監聽<img>點擊事件，在事件處理函數中，創建<input type="file">標籤，註冊<input type="file">change事件，使用EventTarget.dispatchEvent()觸發change事件，在<img>事件處理函數中，通過fileUpload對象獲取上傳的文件對象，創建FormData對象，把文件對象append到FormData對象中，通過XMLHttpRequest對象，把文件發送到服務器上。

可能沒說清楚：畫個流程圖

過程中涉及多個異步操作，可能不太清楚，看代碼可能會好點（可以通過Promise對象管理）

實現代碼：

1、在HTML中添加上傳按鈕

 <img src="upload_icon.png" id="upload"/>

2、 註冊點擊事件

let uploadBtn = document.getElementById("upload");
uploadBtn.addEventListener("click", function(){
    /**
    * ……
    */
}

3、在點擊事件處理函數中創建<input type="file" />

let eInputFile = document.createElement("input");
eInputFile.setAttribute("type", "file");
eInputFile.setAttribute("accept", ".jpg, .jpeg, .png");

4、 添加change監聽事件

eInputFile.addEventListener("change", function(oEvent){
    /**
    * ……
    */
}

5、 在change事件處理函數中獲取上傳的文件。參考資料：HTML DOM FileUpload 對象

let eInputFile = oEvent.target;
let oFile = eInputFile.files[0];

6、 創建FormData對象，把File對象append到FormData中。參考資料：FormData.append() - Web API 接口 | MDN

let oFormData = new FormData();
oFormData.append("img", oFile);

7、 通過XMLHttpRequest對象把表單數據發送到服務器

let xhr = new XMLHttpRequest();
let sMethod = "post";
let sUrl = "dealUploadImage";
xhr.open(sMethod, sUrl);
xhr.send(oFormData);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            console.log(xhr.responseText);
                /**
                 * 下一步處理
                 */
            }
        }
    }
});

8、 觸發上傳事件事件。參考資料：EventTarget.dispatchEvent() - Web APIs | MDN

let eMouseEvent = new MouseEvent("click");
eInputFile.dispatchEvent(eMouseEvent);

---

完整代碼：

<img src="upload_icom.png" id="upload"/>

<script type="text/javascript">
    let uploadBtn = document.getElementById("upload");
    uploadBtn.addEventListener("click", function(){

        //創建上傳文件標籤
        let eInputFile = document.createElement("input");
        eInputFile.setAttribute("type", "file");
        eInputFile.setAttribute("name", "certificate");
        eInputFile.setAttribute("accept", ".jpg, .jpeg, .png");

        //監聽上傳事件
        eInputFile.addEventListener("change", function(oEvent){
            let eInputFile = oEvent.target;
            let oFile = eInputFile.files[0];

            //創建表單對象
            let oFormData = new FormData();
            //將上傳的文件加入到表單對象
            oFormData.append("img", oFile);

            //ajax
            let xhr = new XMLHttpRequest();
            let sMethod = "post";
            //上傳地址
            let sUrl = "dealUploadImage";
            xhr.open(eMethod, sUrl);
            xhr.send(oFormData);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        console.log(xhr.responseText);
                        /**
                         * 下一步處理
                         */
                    }
                }
            }

        });

        //創建上傳事件
        let eMouseEvent = new MouseEvent("click");
        //自動觸發上傳事件
        eInputFile.dispatchEvent(eMouseEvent);
    });
    </script>