效果图:
前端代码:
<div class="role" onclick="file(this)">
<img src="" alt="" id="goods_1" class="file" >
<span style="color: #ccc;">上传图像</span>
<input type="file" name="goods_imgs[]" class="file" value="" id="goods1" onchange="le(this)">
</div>
<div class="role" style="display: none" onclick="file(this)">
<img src="" alt="" id="goods_2" class="file" >
<span style="color: #ccc;">上传图像</span>
<input type="file" name="goods_imgs[]" class="file" value="" id="goods2" onchange="le(this)">
</div>
<div class="role" onclick="copy(this)">
<span style="color: #ccc;">+</span>
</div>
css样式:
.role input[type='file']{opacity:0;}
.role{border:1px solid #c9cccf;text-align:center;width:200px;height:200px;line-height:200px;font-size:18px;margin-top:15px;float:left;margin-left:5px;}
.role img{width: 198px;height: 198px;display: none;}
js代码:
<script type="text/javascript">
//点击圆框时上传图片
function file(evn) {
var img_obj = $(evn).children(".file")
var file_id = $(img_obj[1]).attr("id")
document.getElementById(file_id).click()
}
//点击时复制角色框
function copy(evn) {
var obj = $(evn).prev();
var num = $(".role").length
console.log(num)
$(obj).clone().insertBefore(evn);
$(obj).css("display","block")
var img_obj = $(obj).children(".file")
console.log(img_obj)
var img_id = $(img_obj[0]).attr("id","goods_"+num)
var file_id = $(img_obj[1]).attr("id","goods"+num)
}
//左侧图像点击时显示图像
function le(evn){
var id = $(evn).attr('id');//获取id
var num = "goods_"+id.substr(5,1);
var file = event.target.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
var divObj= $(evn).prev() //获取div的DOM对象
$(divObj).html("") //插入文件名
$("#"+num).css("display","block");
$("#"+num).attr("src",e.target.result); //e.target.result就是最后的路径地址
};
}
}
</script>