javascript 使用FormData實現圖片/檔案非同步上傳
阿新 • • 發佈:2019-02-13
主要思路:
在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];
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);
/**
* 下一步處理
*/
}
}
}
});
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>