<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传照片</title>
<style type="text/css">
.form-list {
margin-left: 15px;
height: 60px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative; }
.form-list:last-of-type {
border-bottom: none; }
.form-list > label {
color: rgba(41, 43, 51, 0.5);
padding: 19px 0px 20px;
display: inline-block;
-webkit-box-flex: 0;
-ms-flex: 0 0 100px;
flex: 0 0 100px; }
.form-list input {
border: none;
outline: none;
margin-bottom: 0; }
.form-list input[name='txt'] {
height: 59px;
color: #292b33;
font-size: 16px; }
.form-list > span {
position: absolute;
right: 15px; }
.form-list > span i {
font-style: normal; }
.photo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between; }
.photo-box .photo-div {
display: none;
clear: both;
min-height: 48px;
min-width: 48px; }
.photo-box .photo-div .photo-iterm {
position: relative;
float: left;
margin-right: 15px; }
.photo-box .photo-div .photo-iterm img {
width: 48px;
height: 48px;
border-radius: 5px;
display: block; }
.photo-box > label {
display: block;
width: 48px;
height: 48px;
border-radius: 5px;
background: #EFEFF4;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 18px;
color: rgba(41, 43, 51, 0.4);
float: left; }
.photo-box input {
visibility: hidden;
width: 1px;
height: 1px; }
</style>
</head>
<body>
<div class="form-list">
<label class="fs-16">专业资质*</label>
<div class="photo-box">
<div class="photo-div" id="profession-preview">
<!--<div class="photo-iterm">
<img src=""/>
<span class="img-delete"></span>
</div>-->
</div>
<label for="t-profession">+</label>
<input type="file" id="t-profession" multiple="multiple"/>
</div>
<span class="fs-14 fc-4"><i id="img-num">0</i>/3</span>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){
var profession_preview = document.getElementById('profession-preview');
var pro_oFile = document.querySelector('#t-profession');
console.log(pro_oFile)
//打印出input本身，
// console.log(pro_oFile.files)
//
//上传专业资质
pro_oFile.onchange = function(){
//支持多选
console.log(pro_oFile.files)
// 0:File(13387) {name: "1b2055cd16427bfac50b98a4f505ad27.jpeg", lastModified: 1516166092650, lastModifiedDate: Wed Jan 17 2018 13:14:52 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 13387, …}
var num=$(profession_preview).children('.photo-iterm').length
console.log(num)
//第一次上传后是0，之后依次1，2，递增，要与索引值比较就要倒过来
if(num<3){
var less = (3-parseInt(num))
//当图片个数超过3个时，不会再执行appendTo事件，所以要有个数和索引值比较，索引值最大是2，所以超过2时不执行
console.log(less)
$.each(pro_oFile.files,function(j,item){
//遍历循环可以在每次input改变时获得当前列表的索引值，即可以获得当前最大的索引值，事件每次执行一次，就遍历（查）一次
if(parseInt(less) > j){
var url = window.URL.createObjectURL(item);
var img = new Image();
img.src = url;
var photo_iterm='';
photo_iterm+='<div class="photo-iterm">'+
'<img src="'+img.src+'"/>'+
'<span class="img-delete"></span>'+
'</div>'
// 插入预览图片
profession_preview.style.display='flex';
$(photo_iterm).appendTo(profession_preview)
}
})
}
imgNum()
}
//图片数量变化
function imgNum(){
var professionLen= $(profession_preview).children('.photo-iterm').length
$('#img-num').text(professionLen)
if(professionLen>=3){
$(profession_preview).siblings('label').hide()
}else{
$(profession_preview).siblings('label').show()
}
}
})
</script>
</html>