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>