//html代码
<!--上传照片-->
<div class="picturesBox clearfix">
<p>上传照片</p>
<div id="impBox"></div> //模拟点击的盒子
</div>
//js代码
var higoodthingsdata = { //定义全局变量
counter: 0
}
$(function(){ //模拟点击
$('#impBox').click(function(){
var counter = higoodthingsdata.counter; //改变参数,方便后面的删除
var inputstr ='<input type="file" class="selectimg" name="images" accept="image/*" multiple="true" οnclick="clickimg(this);"/>'; //动态生成file
$('#impBox').before(inputstr);
$('.selectimg').eq(counter).trigger('click'); //把点击事件模拟到file
})
})
function imgChange(couter){ //change事件
var imgFile = document.getElementsByClassName("selectimg")[couter].files[0];
var fr = new FileReader();
fr.readAsDataURL(imgFile);
fr.οnlοad=function(){
var imgUrl="<span class='selectimg1' style='background:url("+fr.result+") no-repeat center;background-size: cover;'><img src='../../images/wrong.png' οnclick='delate(this)'/></span>"
$("#impBox").before(imgUrl);
higoodthingsdata.counter += 1;
add(0,couter);
}
}
function clickimg(obj) { //file的点击事件
$(obj).change(function() { //file的change事件
imgChange(higoodthingsdata.counter); //调用change事件
})
}
/*点击删除图片*/
function delate(obj){
$(obj).parent().prev().remove();
$(obj).parent().remove();
higoodthingsdata.counter--;
add(1,higoodthingsdata.counter);
}
function add(type,couter){ //判断全局变量
if(type == 0){
f(couter+1 >=6) {
$('#impBox').hide();
}
}else{
if(couter+1 <=6) {
$('#impBox').show();
}
}
}