利用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實現圖片文件異步上傳