最终页面效果如下
(由于图片没有资源路径,所以没有展示出来。图片展示可以忽略)
代码如下
<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层的代码用的是已经封装好的方法,就不展示了。
好了,希望对大家有帮助,来自小萌新的一篇投稿,不对的地方,多多指教