最终页面效果如下
(由于图片没有资源路径,所以没有展示出来 。图片展示可以忽略)
代码如下
更换取消图片尺寸:300px*300px,图片大小不超过500KB , 格式:jpg、png
点击更改按钮,可以替换图片,效果如下(原理是将img标签隐藏,插入选择文件的input标签)
![修改页面 layui原生框架下,展示、替换图片](http://img.gansulong.com/231222/1232095H9-0.png)
文章插图
更改按钮 , 取消按钮 代码如下
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";}});}
![修改页面 layui原生框架下,展示、替换图片](http://img.gansulong.com/231222/1232095507-1.jpg)
文章插图
修改页面的监听提交
代码如下
//监听提交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;}
层的代码用的是已经封装好的方法,就不展示了 。
好了,希望对大家有帮助,来自小萌新的一篇投稿,不对的地方,多多指教
- 天姬变修改教程 天姬变怎么改头像
- 社保卡六位数密码怎么修改 六安社保卡怎么改密码?
- 社保卡信息如何修改 六安社保卡怎么修改信息
- 怪物猎人世界ce修改调查点数 怪物猎人世界ce修改调查点数教程
- ip地址怎么修改 上网ip地址怎么改
- 怎么修改手机软件名称 手机上怎么修改软件名称
- 怎么修改网站内容 怎样修改网站内容
- 西安公积金个人账户信息怎么变更修改
- ppt播放定格第一页 ppt播放页面如何定格
- 佛山电子社保卡密码修改及重置攻略 佛山市电子社保卡