使用H5的FileApi預覽将要上傳的圖檔

具體要做的就是頁面上有個<input type="file" />的按鈕，使用者在選擇需要上傳的圖檔後，頁面上将要上傳的圖檔預覽出來。

以前的做法是，通過Ajax将要上傳的圖檔上傳到伺服器，伺服器響應成功後在頁面上添加一張圖檔。如果上傳錯誤，則需要将伺服器上的圖檔也删除。

現在可以通過H5這樣做，代碼如下：

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 () {
 2     var fileReader = new FileReader();
 3     fileReader.onload = function (e) {
 4         if (fileReader.readyState == FileReader.DONE) {
 5             var img = document.createElement('img');
 6             img.src = this.result;
 7             document.body.appendChild(img); //示例隻是簡單插入body
 8         }
 9     }
10     //一次加載多個檔案
11     var i = 0, src = this.files;
12     fileReader.readAsDataURL(src[i]);
13     fileReader.onloadend = function () {
14         i++;
15         if (i < src.length) fileReader.readAsDataURL(src[i]);
16     }
17 }      

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