<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】
