多张图片上传

HTML:部分

<h3>上传图片</h3>
<div class="up_box">
<div class="up_cont">
<input type="file" id="photo1" name="" accept="image/*"/>
<div id="image" class="image">
<img src="images/背景.png" />
</div>
</div>
<div class="up_cont">
<input id="photo2" type="file" name="file" accept="image/*">
<div id="image1" class="image">
<img src="images/背景.png" />
</div>
</div>
<div class="up_cont">
<input id="photo3" type="file" name="file" accept="image/*">
<div id="image2" class="image">
<img src="images/背景.png" />
</div>
</div>
</div>

css:部分

.up_box .up_cont{width:30vw;margin:1%;background:url(img/chuan.jpg);background-size:100% 100%;height:25vw;position: relative;}
.up_box .up_cont input{width: 30vw;position:absolute;top:0px;left:0px;z-index:9; height: 25vw;opacity: 0;}
.image{width:30vw;height:25vw;position:absolute;top:0px;left:0px;overflow:hidden;}
.image img{width:100%;display:block;}

js部分

<script>
var hasUploadedOne = false;// 已上传过1张图片
var hasUploadedTwo = false;// 已上传过2张图片

//获取到预览框
var imgObjPreview1 = document.getElementById("look1");
var imgObjPreview2 = document.getElementById("look2");

document.getElementById(‘file‘).onchange = function() {
// 若还没完成2张图片的上传
if(!hasUploadedTwo){
//获取到file的文件
var docObj = this;

//获取到文件名和类型（非IE，可一次上传1张或多张）
if(docObj.files && docObj.files[0]) {
// 一次上传了>=2张图片（只有前两张会真的上传上去）
if(docObj.files.length >= 2){
imgObjPreview1.src = window.URL.createObjectURL(docObj.files[0]);
imgObjPreview2.src = window.URL.createObjectURL(docObj.files[1]);
hasUploadedTwo = true;
}
//一次只上传了1张照片
else{
// 这是上传的第一张照片
if(!hasUploadedOne){
imgObjPreview1.src = window.URL.createObjectURL(docObj.files[0]);
hasUploadedOne = true;
}
// 这是上传的第二张照片
else{
imgObjPreview2.src = window.URL.createObjectURL(docObj.files[0]);
hasUploadedTwo = true;
}
}

}
//IE（只能一次上传1张）
else {
//使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
// 这是上传的第一张照片
if(!hasUploadedOne){
imgObjPreview1.src = imgSrc;
hasUploadedOne = true;
}
// 这是上传的第二张照片
else{
imgObjPreview2.src = imgSrc;
hasUploadedTwo = true;
}
document.selection.empty();
}
return true;
}
}
</script>

原文：https://www.cnblogs.com/feng--yan/p/11714944.html