layui原生框架下，展示、替换图片（修改页面）

最终页面效果如下

（由于图片没有资源路径，所以没有展示出来。图片展示可以忽略）

代码如下

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 20%"><span style="color:red">*</span>产品图</label>
            <div class="layui-input-block">
				<span id="spanFront">
					<img id="editForm_productImg" src="" alt="产品图片" />

					</span><span class="red ml10" id="edit_productImg_msg"></span>
                <a href="javascript:;" id="changeFront" onclick="changeImg('Front')">更换</a>
                <a href="javascript:;" id="cancelFront" onclick="changeCancel('Front')">取消</a>
            </div>
            <p style="color: red ;margin-left: 10px;">图片尺寸：300px*300px，图片大小不超过500KB，格式：jpg、png</p>
        </div>

点击更改按钮，可以替换图片，效果如下（原理是将img标签隐藏，插入选择文件的input标签）

更改按钮，取消按钮 代码如下

    window.changeImg = function (str){
        var input = "<input type='file' lay-verify=\"editCheck\"  id='editForm_productImg" + str + "input' class='input_normal w160 required' name='updateNewGoodproductImg" + str
            + "'/>";
        $("#editForm_productImg" + "").attr("style", "display:none");
        $("#span" + str).append(input);
        $("#change" + str).text("");
        $("#cancel" + str).text("取消");
        if (str == "Front")
            changeFront = true;
    }

    window.changeCancel = function (str){
        $("#editForm_productImg" + str + "").removeAttr("style");
        $("#editForm_productImg" + str + "input").remove();
        $("#change" + str).text("更改");
        $("#cancel" + str).text("");
        $('#edit_suply' + str + '_msg').html('');
        if (str == "Front")
            changeFront = false;
    }

（此处特别注意，这里使用的是将id与name分别进行拼接的方法，所以在做修改页面的校验的时候，或者对修改页面进行其他的图片操作的时候，注意图片的id，name是否拼接。在controller层也要重新定义一个图片的属性名，用于修改图片的方法中，此处的属性名要和前端页面拼接好的name保持一致） 

修改的弹出框 代码

    //打开修改的弹窗
    var Index;
    function updateNewGood(data) {
        $('input[type="file"][id^="editForm_productImg"]').remove();//清除选择文件的input标签
        $('img[id^="editForm_productImg"]').show();//展示图片标签
        Index = layer.open({
            type: 1,
            content: $("#updateDiv"),
            area: ['600px', '300px'],
            shade: 0.6,//遮罩层透明度 0-1 默认0.3
            shadeClose: true,//是否点击遮罩层关闭弹窗 默认false
            resize: false,
            anim: 3,
            skin: 'layui-layer-molv',
            title: '编辑新机',
            success: function () {
                //装载新的数据
                $('#updateDataFrm')[0].reset();

                $("#editForm_productImg").attr("src",data.productImg);

                form.val("updateDataFrm", data);
                //装载新的数据
                type = "PUT";
            }
        });
    }

修改页面的监听提交

代码如下

    //监听提交
    form.on('submit(updateSubmit)', function (data) {
        let formData = new FormData(data.form);
        let myfile = $("#addForm_newGoodproductImg")[0].files[0];
        formData.append('newGoodproductImgFront',myfile);
        //增加样式
        $('.addS').addClass(DISABLED);
        $(".addS").attr("disabled", "disabled"); // 避免多次提交,提交置灰
        requestData('/goods/pcNewGood/newGoodEdit', 'post', formData, function (data) {
            if (data.code === 0) {
                tableIns.reload();
                layer.msg(data.msg, {icon: 1}) ;
                layer.close(Index);//关闭弹框
            } else {
                layer.msg(data.msg, {icon: 2}) ;
            }
        }, true, null, false);
    });

下面是修改页面的校验 （额外注意图片的id、name属性为是拼接后的值，前面有提到过）

       editCheck: function (value,item){
            var msg="";
            var attrName=$(item).attr('name');
            if(attrName=="actName"){
                if (value == "") {
                    msg = "产品名称不能为空";
                }
            }
            if(attrName=="describe"){
                if (value == "") {
                    msg = "一句话描述不能为空";
                }
            }
            if(attrName=="updateNewGoodproductImgFront"){
                if (value == "") {
                    msg="请选择要上传的图片";
                } else if(!(value.endsWith(".jpg")) && ! (value.endsWith(".png")) &&!(value.endsWith(".JPG")) && ! (value.endsWith(".PNG"))  ){
                    msg="请上传jpg、png格式的图片";
                }
                else if((document.getElementById("editForm_productImgFrontinput").files[0].size)/1024>=size){
                    msg="请上传"+size+"KB以内的图片";
                }
            }

            return msg;
        }

controller层的代码用的是已经封装好的方法，就不展示了。

好了，希望对大家有帮助，来自小萌新的一篇投稿，不对的地方，多多指教