div,p,span{
margin: 0px;
padding: 0px;
}
.dragIn{
width: 600px;
height: 200px;
border: 1px solid #ddd;
text-align: center;
line-height: 200px;
position: relative;
}
.dragIn input{
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
left: 0;
top: 0;
}
.dragshow2{
margin-top: 20px;
width: 600px;
border: 1px solid #ddd;
padding: 20px;
box-sizing: border-box;
}
.dragshow2 p{
text-align: center;
}
.uploadImg{
width: 100px;
height: 70px;
display: inline-block;
margin-left: 15px;
}
.uploadImg img{
width: 100%;
height: 100%;
}
<div class="dragIn">
点击选择照片
<input type="file" multiple="multiple"/>
</div>
<div class="dragshow2">
<p>暂无图片</p>
</div>
(function(){
var input = document.querySelector(".dragIn input");
var dragshow2 = document.querySelector(".dragshow2");
if(typeof FileReader === "undefined"){
input.setAttribute("disabled","disabled");
}else{
input.addEventListener("change",readFile);
}
function readFile(){
for(var i=0; i<this.files.length; i++){
var read = new FileReader();
var file = this.files[i];
read.readAsDataURL(file);
if(!/image/.test(file.type)){
alert("0000000000");
return false;
}else{
read.onload = function (){
var img = document.createElement("img");
img.src = this.result;
dragshow2.querySelector("p")?dragshow2.removeChild( dragshow2.querySelector("p")):"";
dragshow2.appendChild(img);
};
}
}
};
})()
很普遍的这复制代码
<input type="file" multiple="multiple"/> 点击选择图片
最新推荐文章于 2023-09-22 16:47:53 发布