/preview/zjdaima-bg-1943230585.png)
使用方法
1.搭建一个图片上传的模块
<div class="item">
<svg class="icon addImg" aria-hidden="true">
<use xlink:href="#icon-tianjiatupian"></use>
</svg>
<input name="url" type="file" class="upload_input" onchange="preview(this)"/>
<div class="preview"></div>
<div class="click" onclick="loadImg(this)"></div>
<div class="delete" onclick="deleteImg(this)">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shanchu4"></use>
</svg>
</div>
</div>
2.写入图片预览js
function preview(file) {
var prevDiv = $(file).parent().find('.preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.html('<img src="' + evt.target.result + '" />');
}
reader.readAsDataURL(file.files[0]);
} else {//IE
prevDiv.html('<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>');
}
$(file).parent().find('.delete').show();
}
3.上面的图片展示不出来是因为我用的icon-font,也可以用自己的图片