页面上传图片回显
html
<div class="img_list">
<div class="pic_list">
<div class="item"><img src="front-img/ass_toppic.png"><span class="close" onclick="del(this)"></span></div>
<div class="upload">
<input type="file" id="upload">
</div>
</div>
</div>
imgArr = [];
// 上传图片并显示
upLoadPic("#upload", ".pic_list");
function upLoadPic(obj, posit) {
$(obj).change(function(e) {
//获取文件
var file = this.files[0];
console.log(file)
//判断文件格式
if (file.type != 'image/png' && file.type != 'image/jpeg' && file.type != 'image/gif') {
alert("图片格式不正确");
return false;
}
//读取图片
var reader = new FileReader();
reader.readAsDataURL(file);
//构造Image对象,获取 Image对象
//onload在读取完毕后触发
reader.onload = function() {
//获取读取的URL
var imgURL = this.result;
imgArr.push(imgURL)
var str = ""
str = '<div class="item"><img src=' + imgURL + '><span class="close" οnclick="del(this)"></span></div>';
// 添加
$(posit).prepend(str)
}
})
}