DIV CSS 佈局教程網

利用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" 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); 
} 
} 
});