怎么利用HTML5實現圖片文件異步上傳

本篇內容介紹了“怎么利用HTML5實現圖片文件異步上傳”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

利用HTML5的新特點做文件異步上傳非常簡單方便，本文主要展示JS部分，html結構。下面的代碼并未使用第三發庫，如果有參照，請注意一些未展現出來的代碼片段。我這邊的效果預覽：

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" > 
<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實現圖片文件異步上傳”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！