如何利用HTML5實現圖片文件異步上傳

小編給大家分享一下如何利用HTML5實現圖片文件異步上傳，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1.文件未選擇 2.文件已選擇

HTML代碼部分：

思路：下面代碼中我利用css的z-index屬性將input="file”標簽隱藏在了id=btnSelect元素下面，通過觸發a標簽的點擊后，彈出文件選擇框。下面的masklayer用于點擊確認按鈕后的彈出層，避免用戶重復點擊確認按鈕。

<div id="wp" class="warpper">

<a id="btnSelect">單擊選擇要上傳的照片</a>

<input id="uploadFile" type="file" name="myPhoto" />

<button id="btnConfirm" class="btn" >確認上傳</button>

</div>

<div id="maskLayer" class="mask-layer" style="display:none;">

<p>圖片正在上傳中...</p>

</div>

JS圖片文件驗證部分：

驗證部分為：大小，是否已經選擇，文件的類型 三個部分。第一個createObject方法為創建本地圖片文件的預覽路徑，依次驗證是否為空，文件類型以及文件大小，不滿足條件則一律返回

false,滿足以上3個條件后，在dom中生成圖片預覽，添加img元素，然后利用createObjectURL()方法獲取預覽路徑。

代碼：

//獲取數據的URL地址

function createObjectURL(blob) {

if (window.URL) {

return window.URL.createObjectURL(blob);

} else if (window.webkitURL) {

return window.webkitURL.createObjectURL(blob);

} else {

return null;

}

}

//文件檢測

function checkFile() {

//獲取文件

var file = $$("uploadFile").files[0];

//文件為空判斷

if (file === null || file === undefined) {

alert("請選擇您要上傳的文件！");

$$("btnSelect").innerHTML = "單擊選擇要上傳的照片";

return false;

}

//檢測文件類型

if(file.type.indexOf('image') === -1) {

alert("請選擇圖片文件！");

return false;

}

//計算文件大小

var size = Math.floor(file.size/1024);

if (size > 5000) {

alert("上傳文件不得超過5M!");

return false;

};

//添加預覽圖片

$$("btnSelect").innerHTML = "<img class=/"photo/" src=/""+createObjectURL(file)+"/"/>";

};

JS Ajax請求部分：

說明：第一個監聽文件選擇更改事件，滿足驗證條件后則執行預覽，第二個事件監聽為監聽單擊btnSelect時彈出窗口的響應，下面的則是確認上傳按鈕的事件監聽，開始發送Ajax請求。此處的createXHR()方法為創建XMLHttpRequest對象，代碼我并未貼出，包括addEventListener()方法，這2個部分可以參考其他文章。

復制代碼

代碼如下:

復制代碼

//監聽圖片URL地址更改

addEventListener($$("uploadFile"), "change", function() {

checkFile();

});

//監聽單擊文件選擇按鈕

addEventListener($$("btnSelect"), "click", function() {

//彈出文件選擇框

$$("uploadFile").click();

});

//監聽確認上傳按鈕的點擊事件

addEventListener($$("btnConfirm"), "click", function(e) {

if (checkFile()) {

try {

//執行上傳操作var xhr = createXHR();

$$("maskLayer").style.display = "block";

xhr.open("post","/uploadPhoto.action", true);

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

var flag = xhr.responseText;

if (flag == "success") {

alert("圖片上傳成功！");

} else {

alert("圖片上傳成功！");

};

$$("maskLayer").style.display = "none";

};

};

//表單數據

var fd = new FormData();

fd.append("myPhoto", $$("uploadFile").files[0]);

//執行發送

xhr.send(fd);

} catch (e) {

console.log(e);

}

}

});

以上是“如何利用HTML5實現圖片文件異步上傳”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！