style:图片上传

任超
Showing 4 changed files with 93 additions and 41 deletions
staticCss/yysq.css
staticImages/fangda.png
staticImages/shanchu.png
staticJs/onlineApply/houseFill.js
--- a/staticCss/yysq.css
View file @9ecccd7
+++ b/staticCss/yysq.css
View file @9ecccd7
@@ -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
--- a/staticImages/fangda.png 0 → 100644
View file @9ecccd7
+++ b/staticImages/fangda.png 0 → 100644
View file @9ecccd7
--- a/staticImages/shanchu.png 0 → 100644
View file @9ecccd7
+++ b/staticImages/shanchu.png 0 → 100644
View file @9ecccd7
--- a/staticJs/onlineApply/houseFill.js
View file @9ecccd7
+++ b/staticJs/onlineApply/houseFill.js
View file @9ecccd7
@@ -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();
                }
            }
        });
    });
-    //删除事件
+    //del
-    $(".ddd").click(function () {
+    $(document).on("click", ".delete", function (e) {
-        let imgObj = $(this).parent().siblings(".pic");
+        let imgObj = $(this).parent().parent().siblings(".pic");
-        let file = $(this).parent().siblings("input[type='file']");
+        let file = $(this).parent().parent().siblings("input[type='file']");
-        let slclmxObj = $(this).parent().parent();
+        let slclmxObj = $(this).parent().parent().parent();
-        $.ajax({
+        layer.confirm('此操作将删除图片是否继续', {
-            type: "post",  //提交方式  
+            btn: ['是', '否'] //按钮
-            url: portal.api_url + "/portal/FillInformation/deleteSlcl",//路径  
+        }, function () {
-            dataType: "json",
+            $.ajax({
-            data: {
+                type: "post",  //提交方式  
-                'bsmSlclmx': slclmxObj.prop("id")
+                url: portal.api_url + "/portal/FillInformation/deleteSlcl",//路径  
-            },
+                dataType: "json",
-            //数据，这里使用的是Json格式进行传输  
+                data: {
-            success: function (result) {//返回数据根据结果进行相应的处理           
+                    'bsmSlclmx': slclmxObj.prop("id")
-                if (result.code == 200) {
+                },
-                    imgObj.attr("src", "");
+                //数据，这里使用的是Json格式进行传输  
-                    file.after(file.clone().val(""));
+                success: function (result) {//返回数据根据结果进行相应的处理           
-                    file.remove();
+                    if (result.code == 200) {
-                    slclmxObj.attr("id", "");
+                        layer.msg(result.message);
-                } else {
+                        imgObj.attr("src", "../../staticImages/update.png");
-                    alert('删除失败！');
+                        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('上传成功!');
-                // 
            }
        }
    });