<div class="form-group">
<label for="imgs" class="col-md-3 col-sm-3 control-label">设备图片:</label>
<div class="col-md-8 col-sm-8">
<div class="photo-box">
<div class="photo-box-icon">
<img style=" 100%;" src="../../img/H5_addPhoto.png" alt="图片">
<input type="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-icon img {
width: 100%;
height: 100%;
}
.photo-box-icon input {
width: 50px;
height: 50px;
position: absolute;
top: 0;
opacity: 0;
}
.photo-add {
/* 230px;*/
width: 100px;
height: 100px;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #32c5d2;
position: relative;
z-index: 9;
margin: 6px;
overflow: hidden;
}
.photo-add img {
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;
}
//图片上传
var attachmentArr = [];
function addPhoto(file, e) {
var fileObj = file.files[0];
var formData = new FormData();
formData.append('upfile', fileObj);
var options = {
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)
var innerHtml = '<div class="photo-add" onmouseover ="IconShow(this)" onmouseout ="IconHide(this)">' +
'<img src="' + imgs + '" alt = "添加照片" class="photoShow" onclick="viewBigPhoto(this)"/>' +
'<div class="closeIcon">' +
'<span class="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);
};
//删除图标显隐
function IconShow(e) {
$(e).children('.closeIcon').show();
};
function IconHide(e) {
$(e).children('.closeIcon').hide();
};
//编辑时照片显示
function editPhotoShow(obj) {
// console.log('obj',obj)
if (obj) {
imgs = obj.split(';'); //分割一下下
};
var innerHtml = '';
for (var i = 0; i < imgs.length; i++) {
innerHtml += '<div class="photo-add" onmouseover ="IconShow(this)" onmouseout ="IconHide(this)">' +
'<img style = " 100%;" src=' + imgs[i] + ' alt = "添加照片" class="photoShow" onclick="viewBigPhoto(this)"/>' +
'<div class="closeIcon">' +
'<span class="delPhoto-btn" onclick="delPhoto(this)">' + "X" +
'</span>' +
'</div>' +
'</div>';
};
//获取编辑图片值
attachmentArr = [];
attachmentArr = imgs;
$(".photo-box").before(innerHtml);
};
//图片删除
function delPhoto(e) {
var thisImage = $(e).parent().parent().find('img').attr("src");
attachmentArr.remove(thisImage);
$(e).parent().parent().remove();
};
/*
*图片放大预览
*/
function viewBigPhoto(e) {
var imgSrc = $(e).attr('src');
$('#PhotoBigBox').modal('show');
$('.photoViewDiv img').attr('src', imgSrc);
};