首先,可以先了解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
示例如下: