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

 

以上則爲全部主要代碼部分，如果有什麼問題可以聯繫我，歡迎交流。