JS input file图片上传预览效果

首先，可以先了解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" οnchange="liUploadImg(this)"></li>
</ul>

js代码：

//商品相册图片上传预览
    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

示例如下：