如何利用HTML5實(shí)現(xiàn)圖片文件異步上傳

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

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

HTML代碼部分：

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

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

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

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

<button id="btnConfirm" class="btn" >確認(rèn)上傳</button>

</div>

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

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

</div>

JS圖片文件驗(yàn)證部分：

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

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

代碼：

//獲取數(shù)據(jù)的URL地址

function createObjectURL(blob) {

if (window.URL) {

return window.URL.createObjectURL(blob);

} else if (window.webkitURL) {

return window.webkitURL.createObjectURL(blob);

} else {

return null;

}

}

//文件檢測(cè)

function checkFile() {

//獲取文件

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

//文件為空判斷

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

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

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

return false;

}

//檢測(cè)文件類型

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

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

return false;

}

//計(jì)算文件大小

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

if (size > 5000) {

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

return false;

};

//添加預(yù)覽圖片

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

};

JS Ajax請(qǐng)求部分：

說(shuō)明：第一個(gè)監(jiān)聽(tīng)文件選擇更改事件，滿足驗(yàn)證條件后則執(zhí)行預(yù)覽，第二個(gè)事件監(jiān)聽(tīng)為監(jiān)聽(tīng)單擊btnSelect時(shí)彈出窗口的響應(yīng)，下面的則是確認(rèn)上傳按鈕的事件監(jiān)聽(tīng)，開(kāi)始發(fā)送Ajax請(qǐng)求。此處的createXHR()方法為創(chuàng)建XMLHttpRequest對(duì)象，代碼我并未貼出，包括addEventListener()方法，這2個(gè)部分可以參考其他文章。

復(fù)制代碼

代碼如下:

復(fù)制代碼

//監(jiān)聽(tīng)圖片URL地址更改

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

checkFile();

});

//監(jiān)聽(tīng)單擊文件選擇按鈕

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

//彈出文件選擇框

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

});

//監(jiān)聽(tīng)確認(rèn)上傳按鈕的點(diǎn)擊事件

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

if (checkFile()) {

try {

//執(zhí)行上傳操作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";

};

};

//表單數(shù)據(jù)

var fd = new FormData();

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

//執(zhí)行發(fā)送

xhr.send(fd);

} catch (e) {

console.log(e);

}

}

});

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