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

最终页面效果如下
（由于图片没有资源路径，所以没有展示出来。图片展示可以忽略）
代码如下
*产品图更换取消图片尺寸：300px*300px，图片大小不超过500KB ，格式：jpg、png
点击更改按钮，可以替换图片，效果如下（原理是将img标签隐藏，插入选择文件的input标签）

文章插图
更改按钮，取消按钮代码如下

window.changeImg = function (str){var input = "";$("#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是否拼接。在层也要重新定义一个图片的属性名，用于修改图片的方法中，此处的属性名要和前端页面拼接好的name保持一致）
修改的弹出框代码
【修改页面layui原生框架下，展示、替换图片】

//打开修改的弹窗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.3shadeClose: true,//是否点击遮罩层关闭弹窗 默认falseresize: 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 = http://www.kingceram.com/post/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 =http://www.kingceram.com/post/="") {msg = "产品名称不能为空";}}if(attrName=="describe"){if (value =http://www.kingceram.com/post/="") {msg = "一句话描述不能为空";}}if(attrName=="updateNewGoodproductImgFront"){if (value =http://www.kingceram.com/post/="") {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;}

层的代码用的是已经封装好的方法，就不展示了。
好了，希望对大家有帮助，来自小萌新的一篇投稿，不对的地方，多多指教