版权声明:转载请注明出处!!谢谢!! https://blog.csdn.net/weixin_43474398/article/details/90768884
只用前端js。jquery。
前端html
<style>
.uploadImgBtn {
border: black solid 1px;
width: 200px;
height: 200px;
cursor: pointer;
position: relative;
background-image: url("12.jpg");
-webkit-background-size: cover;
background-size: cover;
}
.uploadImgBtn .uploadImg {
position: absolute;
right: 0;
top:0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/*这是一个用做回显的盒子的样式*/
.pic{
width: 100px;
height: 100px;
}
.pic img {
border: saddlebrown solid 2px ;
width: 200px;
height: 200px;
}
</style>
别忘了引入js文件
<script>
$(document).ready(function(){
$("#uploadImgBtn").click(function(){
var $input = $("#file");
console.log($input)
$input.on("change" , function(){
console.log(this)
var files = this.files;
var length = files.length;
console.log("选择了"+length+"张图片");
//3、回显
$.each(files,function(key,value){
//每次都只会遍历一个图片数据
var div = document.createElement("div"),
img = document.createElement("img");
div.className = "pic";
var fr = new FileReader();
fr.onload = function(){
img.src=this.result;
div.appendChild(img);
document.body.appendChild(div);
}
fr.readAsDataURL(value);
})
})
//4、我们把当前input标签的id属性remove
$input.removeAttr("id");
//我们做个标记,再class中再添加一个类名就叫test
var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
$(this).append($(newInput));
})
})
</script>
效果
不明白的call我。。共同进步。。