利用HTML5的新特點(diǎn)做文件異步上傳非常簡(jiǎn)單方便，本文主要展示JS部分，html結(jié)構(gòu)。下面的代碼并未使用第三發(fā)庫(kù)，如果有參照，請(qǐng)注意一些未展現(xiàn)出來(lái)的代碼片段。我這邊的效果預(yù)覽：
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)聽文件選擇更改事件，滿足驗(yàn)證條件后則執(zhí)行預(yù)覽，第二個(gè)事件監(jiān)聽為監(jiān)聽單擊btnSelect時(shí)彈出窗口的響應(yīng)，下面的則是確認(rèn)上傳按鈕的事件監(jiān)聽，開始發(fā)送Ajax請(qǐng)求。此處的createXHR()方法為創(chuàng)建XMLHttpRequest對(duì)象，代碼我并未貼出，包括addEventListener()方法，這2個(gè)部分可以參考其他文章。
復(fù)制代碼
//監(jiān)聽圖片URL地址更改
addEventListener($$("uploadFile"), "change", function() {
checkFile();
});
//監(jiān)聽單擊文件選擇按鈕
addEventListener($$("btnSelect"), "click", function() {
//彈出文件選擇框
$$("uploadFile").click();
});
//監(jiān)聽確認(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);
}
}
});
以上則為全部主要代碼部分，如果有什么問(wèn)題可以聯(lián)系我，歡迎交流。
