<div class="div-title">
<h5>图片上传
</h5>
<div class="photo-box">
<div class="photo-box-icon">
<img style="width: 100%;" src="<%=staticServPath%>/static/img/H5_addPhoto.png" alt="picture">
<input type="file" onchange="angular.element(this).scope().addPhoto(this)" accept="image/*" id="carPhotoFile" />
</div>
</div>
</div>
/*图片上传*/
.photo - box {
padding:
10 px;
display:
inline - block;
}
.photo - box - icon {
width:
50 px;
height:
50 px;
display:
inline - block;
position:
relative;
}
.photo - box - icon img {
width:
100 % ;
height:
100 % ;
}
.photo - box - icon input {
width:
50 px;
height:
50 px;
position:
absolute;
top:
0;
opacity:
0;
}
.photo - add {
width:
230 px;
height:
100 px;
display:
inline - block;
margin - right:
10 px;
margin - bottom:
10 px;
border:
1 px solid #32c5d2;
position:
relative;
z-index:
9;
}
.photo-add img{
width:
100%;
height:
100%;
background-size:
100% 100%;
}
.photo-add .closeIcon{
position:
absolute;
top:
0;
background:
red;
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;
}
$scope.addPhoto =
function(file) {
var fileObj = file.files[0
];
var formData =
new FormData();
formData.append('file'
, fileObj);
var options =
{
url: webroot "/services/api/file/uploadImg"
,
type: 'POST'
,
data: formData,
processData: false,
contentType: false,
headers: {
'ticket'
: ticket
},
success: function(rsp) {
if (rsp.code == 200
) {
imgs =
rsp.result;
var innerHtml = '<div class="photo-add" onchange="angular.element(this).scope().showPhoto(this)">'
'<img style = "width: 100%;" src="' imgs '" alt = "添加照片" class="photoShow" />'
'</div>'
;
$(".photo-box"
).before(innerHtml);
attachmentArr.push(rsp.result);
} else {
console.log(rsp.message);
}
},
error: function(e) {
console.log("网络错误!"
);
}
};
$.ajax(options);
};
var attachmentArr =
[];
function addPhoto(file) {
var fileObj = file.files[0
];
var formData =
new FormData();
formData.append('file'
, fileObj);
var options =
{
url: webroot "/upload/uploadImg"
,
type: 'POST'
,
data: formData,
processData: false,
contentType: false,
success: function(rsp) {
if (rsp.code == 200
) {
imgs =
rsp.result;
var innerHtml = '<div class="photo-add" onmouseover ="IconShow(this)" onmouseout ="IconHide(this)">'
'<img style = "width: 100%;" src="' imgs '" alt = "添加照片" class="photoShow" />'
'<div class="closeIcon">'
'<span class="delPhoto-btn" onclick="delPhoto(this)">' "X"
'</span>'
'</div>'
'</div>'
;
$(".photo-box"
).before(innerHtml);
attachmentArr.push(rsp.result);
// 超过两张图片隐藏图标
// if (attachmentArr.length >= 2) {
// $('.photo-box-icon').hide();
// };
}
else {
hint(rsp.message);
}
},
error: function(e) {
console.log("网络错误!"
);
}
};
$.ajax(options);
};
//删除图标显隐
function IconShow(e) {
$(e).children('.closeIcon'
).show();
};
function IconHide(e) {
$(e).children('.closeIcon'
).hide();
};
//图片删除
function delPhoto(e) {
var thisImage = $(e).parent().parent().find('img').attr("src"
);
attachmentArr.remove(thisImage);
$(e).parent().parent().remove();
};
更多专业前端知识，请上
【猿2048】www.mk2048.com
