如何預覽將要上傳的圖片-使用H5的FileAPI

這篇將要說的東西已經不新鮮了.

　　參考資料: Reading files in JavaScript using the File APIs (鑒於作者在美國, 我姑且認為作者母語是英語, 當然鏈接中有本地化可以選擇中文)

要做什么效果呢, 就是頁面上有個<input type="file" />, 用戶選擇需要上傳的圖片后, 頁面上顯示將要上傳的圖片.

以前呢, 需要Ajax將原圖上傳到服務器, 得到成功響應后在頁面上添加一張圖片. 如果用戶發現上傳錯了, 需要把服務器上的相應圖片刪除.

現在呢, 可以這樣, 先上代碼:

document.querySelector('#upfile').onchange = function (evt) {
    var files = evt.target.files;
    for(var i = 0, f; f = files[i]; i++){
        if(!f.type.match('image.*')) continue;
        
        var reader = new FileReader();
        reader.onload = (function(theFile){
            return function(e){
                var img = document.createElement('img');
                img.title = theFile.name;
                img.src = e.target.result;
                document.body.appendChild(img); //這里你想插哪插哪  
            }
        })(f);
        reader.readAsDataURL(f);
    }  
}

document.querySelector('#upfile').onchange = function () {
    var fileReader = new FileReader();
    fileReader.onload = function (e) {
        if (fileReader.readyState == FileReader.DONE) {
            var img = document.createElement('img');
            img.src = this.result;
            document.body.appendChild(img); //示例只是簡單插入body
        }
    }
    //一次加載多個文件
    var i = 0, src = this.files;
    fileReader.readAsDataURL(src[i]);
    fileReader.onloadend = function () {
        i++;
        if (i < src.length) fileReader.readAsDataURL(src[i]);
    }
}

　　轉載請注明出處: http://www.cnblogs.com/zaiyuzhong/p/reading-files-by-fileAPIs.html

相應的html節點: <input type="file" id="upfile" multiple /> (如果不使用多選除去multiple)

這段代碼的關鍵在被實例化的FileReader對象上, FileReader包括四個異步讀取文件的選項:

• FileReader.readAsBinaryString(File|Blob) // result將包含二進制字符串形式的數據
• FileReader.readAsText(File|Blob, [encoding]) // result將包含字符串形式的數據, 編碼格式默認utf-8, 可通過encoding參數指定
• FileReader.readAsDataURL(File|Blob) // result將包含數據網址形式的數據
• FileReader.readAsArrayBuffer(File|Blob) // result將包含ArrayBuffer形式的數據

調用某種方法后, 會有 onloadstart, onprogress, onload, onabort, onerror 和 onloadend 這幾種事件.

當然, FileAPI可不只有這點東西, 更多的請看參考資料.