首先，可以先了解file 和FileReader 的API，在選取一個或者多個檔案之後,訪問到代表了所選檔案的一個或多個File物件，這些物件被包含在一個FileList物件中。所有type屬性(attribute)為file的<input>元素都有一個files屬性，用來儲存使用者所選擇的檔案。files有一個length屬性和item方法，我們可以通過files[index]或者files.item(index)獲取我們選擇的file物件。可以通過change事件監聽input file輸入完成事件。

html程式碼：

 <ul class="crgoods_uploadUl clearfix">
     <li><img src="img/product1.jpg"></li>
     <li><img src="img/product1.jpg"></li>
     <li class="add"><i>+</i>最多20張<input type="file" class="liAdd_flie" onchange="liUploadImg(this)"></li>
</ul>
 

//商品相簿圖片上傳預覽
    function liUploadImg(file){     
        if (file.files && file.files[0]){
            var reader = new FileReader();
            reader.onload = function(evt){ 
                // imgUpload.src = evt.target.result;
                $('.crgoods_uploadUl li.add').before('<li><img src="'+evt.target.result+'"></li>');   
            }
            reader.readAsDataURL(file.files[0]);
        }else{ 
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            imgUpload.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
        }
    }
 

另外，詳細API可以參考https://segmentfault.com/a/1190000006600936