Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
9ecccd74 by 任超
Options

style:图片上传

1 parent ccadf2e6
Inline Side-by-side
Showing 4 changed files with 93 additions and 41 deletions
......@@ -436,7 +436,48 @@ input[type='file'] {
border-radius: 2px;
box-sizing: border-box;
}
.conImageUpdate {
width: 100%;
min-height: 290px;
}
.itemImageUpdate {
position: relative;
margin-right: 15px;
position: relative;
}
.mask {
width: 100%;
height: 240px;
background: rgba(0, 0, 0, 0.3);
position: relative;
position: absolute;
left: 0;
top: 0;
display: none;
opacity: 0;
}
.mask:hover {
opacity: 1;
}
.mask p {
width: 100%;
height: 30px;
text-align: center;
position: absolute;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
padding-top: 5px;
}
.mask p img {
width: 20px;
height: 20px;
cursor: pointer;
margin: 0 10px;
}
.imageUpdateTitle {
float: left;
margin-right: 10px;
height: 240px;
width: 70px;
line-height: 240px;
}
\ No newline at end of file
......
......@@ -41,7 +41,7 @@ $(function () {
});
//读取受理信息
function loadAcceptDetail(){
function loadAcceptDetail() {
$('#wwsqbh p').text(slsqxx.wwsqbh);
$('#sqrq p').text(slsqxx.sqrq);
//$('#sqrmc p').text(slsqxx.sqrmc);
......@@ -294,14 +294,15 @@ function LoadClxxDiv() {
let clxxDic = $("#clxx");
let clxxContent;
$.each(slsqxx.slclList, function (index, item) {
clxxContent = '<div id="' + item.bsmCl + '">';
clxxContent = '<div id="' + item.bsmCl + '" class="conImageUpdate">';
clxxContent += '<h5 class="imageUpdateTitle">' + slsqxx.slclList[index].clmc + '</h5>';
for (i = 0; i < item.fs; i++) {
clxxContent += '<div style="float: left;" class="itemImageUpdate">';
clxxContent += '<img class="pic" src="../../staticImages/update.png">';
clxxContent += '<input name="file" accept="image/*" type="file" style="display: none" />';
clxxContent += '<div class="mask"><p><img class="enlarge" src="../../staticImages/fangda.png"> <img class="delete" src="../../staticImages/shanchu.png"></p></div>';
clxxContent += '<div class="certificate">';
clxxContent += '<span>' + slsqxx.slclList[index].clmc + '【' + slsqxx.slclList[index].wjlxmc + '】（' + slsqxx.slclList[index].fs + '-' + (i + 1) + '）</span>';
clxxContent += '<a class="ddd">删除</a>';
clxxContent += '</div>';
clxxContent += '</div>';
}
......@@ -318,45 +319,66 @@ function AddCLxxClick() {
$(this).next().click(); //隐藏了input:file样式后，点击头像就可以本地上传
$(this).next().on("change", function () {
var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
console.log(999, objUrl)
if (objUrl) {
let bsm_slclmx = UploadPicture(this.files[0], $(this).parent().parent().prop("id"));
if (bsm_slclmx == "") {
alert("图片上传失败，请稍后上传！");
layer.msg('图片上传失败，请稍后上传！');
}
else {
layer.msg('图片上传成功');
$(this).prev().attr("src", objUrl);//将图片路径存入src中，显示出图片
$(this).parent().attr("id", bsm_slclmx);
$(this).parent().find('.mask').show();
}
}
});
});
//删除事件
$(".ddd").click(function () {
let imgObj = $(this).parent().siblings(".pic");
let file = $(this).parent().siblings("input[type='file']");
let slclmxObj = $(this).parent().parent();
$.ajax({
type: "post", //提交方式
url: portal.api_url + "/portal/FillInformation/deleteSlcl",//路径
dataType: "json",
data: {
'bsmSlclmx': slclmxObj.prop("id")
},
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200) {
imgObj.attr("src", "");
file.after(file.clone().val(""));
file.remove();
slclmxObj.attr("id", "");
} else {
alert('删除失败！');
//del
$(document).on("click", ".delete", function (e) {
let imgObj = $(this).parent().parent().siblings(".pic");
let file = $(this).parent().parent().siblings("input[type='file']");
let slclmxObj = $(this).parent().parent().parent();
layer.confirm('此操作将删除图片是否继续', {
btn: ['是', '否'] //按钮
}, function () {
$.ajax({
type: "post", //提交方式
url: portal.api_url + "/portal/FillInformation/deleteSlcl",//路径
dataType: "json",
data: {
'bsmSlclmx': slclmxObj.prop("id")
},
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200) {
layer.msg(result.message);
imgObj.attr("src", "../../staticImages/update.png");
file.after(file.clone().val(""));
file.remove();
slclmxObj.attr("id", "");
} else {
layer.msg('删除失败！');
}
}
}
});
}, function () {
layer.msg('已取消删除');
});
});
})
// 放大
$(document).on("click", ".enlarge", function (e) {
var imgHtml = "<img src='../../staticImages/update.png' />";
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: imgHtml
});
})
}
// 图片上传
......@@ -378,17 +400,6 @@ function UploadPicture(flie, bsmCl) {
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200) {
bsm_slclmx = result.data[0].bsmSlclmx;
//layer.msg('上传成功!');
// fileul.parent().find('.fileListName .fileName').eq(fileul.find("li").length - 1).find('.operation').attr('bsmSlclmx', result.data[0].bsmSlclmx)
// if (fileul.find('.fileName').length === sizeNum) {
// fileul.parent().find('.pictureUpload').show()
// layer.msg('上传成功,并且以上传最大限度!');
// fileul.parent().find('.file_name').css("z-index", "15");
// fileul.parent().find('.updatetext').hide()
// fileul.parent().find('.update').attr('src', '../../staticImages/Yes.png')
// } else {
// layer.msg('上传成功!');
//
}
}
});
......