HTML5實現圖片文件異步上傳
利用HTML5的新特點做文件異步上傳很easy方便,本文主要展示JS部分。html結構。以下的代碼並未使用第三發庫,假設有參照,請註意一些未展現出來的代碼片段。
我這邊的效果預覽:
1.文件未選擇 2.文件已選擇
HTML代碼部分:
思路:以下代碼中我利用css的z-index屬性將input="file”標簽隱藏在了id=btnSelect元素以下,通過觸發a標簽的點擊後,彈出文件選擇框。
以下的masklayer用於點擊確認button後的彈出層,避免用戶反復點擊確認button。
<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時彈出窗體的響應。以下的則是確認上傳button的事件監聽,開始發送Ajax請求。此處的createXHR()方法為創建XMLHttpRequest對象。代碼我並未貼出,包含addEventListener()方法,這2個部分能夠參考其它文章。
//監聽圖片URL地址更改 addEventListener($$("uploadFile"), "change", function() { checkFile(); }); //監聽單擊文件選擇button addEventListener($$("btnSelect"), "click", function() { //彈出文件選擇框 $$("uploadFile").click(); }); //監聽確認上傳button的點擊事件 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實現圖片文件異步上傳