<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>上传以后显示多张图片</title>
</head>
<body>
<input type="file" id="upload" />
<div id="uploadBox"></div>
<script>
var filename = document.getElementById("upload");
//定义一个数组来放图片,我每上传一张图片都放进来
var imgs = [];
filename.onchange = function () {
var file = this.files;
// console.log(file.length);
// console.log("haha");
// var reader = new FileReader();
// reader.readAsDataURL(file[0]);
// reader.onload = function () {
// document.getElementById("uploadBox").innerHTML +=
// "<div class='divImg' id='uploadImg'><img src='" +
// reader.result +
// "' class='imgBiMG' style='width:400px'></div>";
for (i = 0; i < file.length; i++) {
//这个其实也是相当于异步调用的，只要我每次进入重新给我的图片新开一个位置就好了，也不要循环，就是每次我上传
//我的图片都有一个新的位置，原理的上传过的图片不会动
console.log(i);
var reader = new FileReader();
reader.readAsDataURL(file[i]);
reader.onload = function () {
// imgbq.style.width = "400px";
// imgbq.src = reader.result;
// console.log(imgbq.src);
document.getElementById("uploadBox").innerHTML +=
"<div class='divImg' id='uploadImg'><img src='" +
reader.result +
"' class='imgBiMG' style='width:400px'></div>";
};
console.log(document.getElementById("uploadBox"));
// imgs.push(filename[i].files[0]);
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<style>
body {
background: #edf0f2;
}
img {
width: 100%;
display: block;
border: none;
vertical-align: bottom;
border: none;
}
input[type="button"] {
-webkit-appearance: none;
}
.productDrawingBox {
background-color: #fcfcfc;
color: #333333;
font-size: 16px;
padding-left: 11px;
border-bottom: solid 1px #e5e5e5;
}
.productDescription {
height: 44px;
line-height: 44px;
}
.productImg {
height: 96px;
overflow: hidden;
}
.imgBiMG {
width: 78px;
height: 81px;
float: left;
display: block;
}
.uploadDIv {
width: 78px;
height: 81px;
background-color: #edf0f2;
font-size: 28px;
color: #bfbfbf;
text-align: center;
line-height: 81px;
float: left;
position: relative;
}
.uploadDIv input {
width: 78px;
height: 78px;
opacity: 0;
position: absolute;
right: 0px;
top: 0px;
z-index: 4;
padding: 0;
}
</style>
</head>
<body>
<div class="productDrawingBox">
<div class="productDescription">上传图片</div>
<div class="productImg">
<div id="uploadBox"></div>
<div class="uploadDIv">
<span>+</span
><input
type="file"
name="file"
multiple
id="inputs"
accept="image/*"
class="fileTest"
multiple="multiple"
/>
</div>
</div>
</div>
</body>
<!-- <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
var img = []; //创建一个空对象用来保存传入的图片
var AllowImgFileSize = "101376"; //1兆
$("#inputs").change(function () {
var fil = this.files;
console.log(fil.length);
for (var i = 0; i < fil.length; i++) {
var curr = $("#inputs")[i].files[0].size;
if (curr > AllowImgFileSize * 101376) {
//当图片大于1兆提示
layer.msg("图片文件大小超过限制 请上传小于99M的文件");
} else {
reads(fil[i]);
img.push($("#inputs")[i].files[0]); //将传入的图片push到空对象中
}
}
if (img.length >= 6) {
//判断图片的数量，数量不能超过3张
$(".uploadDIv").hide();
} else {
$(".uploadDIv").show();
}
console.log(img);
});
function reads(fil) {
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function () {
document.getElementById("uploadBox").innerHTML +=
"<div class='divImg' id='uploadImg'><img src='" +
reader.result +
"' class='imgBiMG'></div>";
};
}
});
</script>
</html>