<divclass="form-group">
<labelfor="imgs"class="col-md-3col-sm-3control-label">设备图片:</label>
<divclass="col-md-8col-sm-8">
<divclass="photo-box">
<divclass="photo-box-icon">
<imgstyle="width:100%;"src="../../img/H5_addPhoto.png"alt="图片">
<inputtype="file"onchange="addPhoto(this,event)"accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"id="imgs"/>
</div>
</div>
</div>
</div>
.photo-box{
padding:10px;
display:inline-block;
}
.photo-box-icon{
width:50px;
height:50px;
display:inline-block;
position:relative;
}
.photo-box-iconimg{
width:100%;
height:100%;
}
.photo-box-iconinput{
width:50px;
height:50px;
position:absolute;
top:0;
opacity:0;
}
.photo-add{
/*width:230px;*/
width:100px;
height:100px;
display:inline-block;
margin-right:10px;
margin-bottom:10px;
border:1pxsolid#32c5d2;
position:relative;
z-index:9;
margin:6px;
overflow:hidden;
}
.photo-addimg{
width:100%;
height:100%;
background-size:contain;
}
.photo-add.closeIcon{
position:absolute;
top:0;
background:#000;
opacity:0.6;
height:20px;
width:100%;
display:none;
}
.photo-add.closeIcon.delPhoto-btn{
position:absolute;
right:0;
width:20px;
height:18px;
top:1px;
text-align:center;
cursor:pointer;
color:#fff;
}
//图片上传
varattachmentArr=[];
functionaddPhoto(file,e){
varfileObj=file.files[0];
varformData=newFormData();
formData.append('upfile',fileObj);
varoptions={
url:urls+"/file/uploadImage",
type:'POST',
data:formData,
processData:false,
contentType:false,
headers:{
"author-token-key":localStorage.getItem('token')
},
success:function(rsp){
//console.log('rsp',rsp)
imgs=$.parseJSON(rsp).url;//json转对象
//console.log('imgs',imgs)
varinnerHtml='<divclass="photo-add"onmouseover="IconShow(this)"onmouseout="IconHide(this)">'+
'<imgsrc="'+imgs+'"alt="添加照片"class="photoShow"onclick="viewBigPhoto(this)"/>'+
'<divclass="closeIcon">'+
'<spanclass="delPhoto-btn"onclick="delPhoto(this)">'+"X"+
'</span>'+
'</div>'+
'</div>';
$(".photo-box").before(innerHtml);
attachmentArr.push(imgs);
//避免不能重复提交同一张图片
e.target.value='';
},
error:function(e){
layer.msg('上传失败，请重新上传')
console.log("网络错误!");
}
};
$.ajax(options);
};
//删除图标显隐
functionIconShow(e){
$(e).children('.closeIcon').show();
};
functionIconHide(e){
$(e).children('.closeIcon').hide();
};
//编辑时照片显示
functioneditPhotoShow(obj){
//console.log('obj',obj)
if(obj){
imgs=obj.split(';');//分割一下下
};
varinnerHtml='';
for(vari=0;i<imgs.length;i++){
innerHtml+='<divclass="photo-add"onmouseover="IconShow(this)"onmouseout="IconHide(this)">'+
'<imgstyle="width:100%;"src='+imgs[i]+'alt="添加照片"class="photoShow"onclick="viewBigPhoto(this)"/>'+
'<divclass="closeIcon">'+
'<spanclass="delPhoto-btn"onclick="delPhoto(this)">'+"X"+
'</span>'+
'</div>'+
'</div>';
};
//获取编辑图片值
attachmentArr=[];
attachmentArr=imgs;
$(".photo-box").before(innerHtml);
};
//图片删除
functiondelPhoto(e){
varthisImage=$(e).parent().parent().find('img').attr("src");
attachmentArr.remove(thisImage);
$(e).parent().parent().remove();
};
/*
*图片放大预览
*/
functionviewBigPhoto(e){
varimgSrc=$(e).attr('src');
$('#PhotoBigBox').modal('show');
$('.photoViewDivimg').attr('src',imgSrc);
};
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56659.shtml
