HTML基本结构:
<form class="layui-form" action="" id="feedBackForm">
<div class="layui-form-item">
<!--表单内容-->
</div>
<!--图片上传-->
<div class="layui-upload feedback-padding">
<button type="button" class="layui-btn" id="selectImg">选择图片</button>
<input type="text" class="layui-hide" name="">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div id="previewImg" class="layui-clear feedback-overflow">
</div>
</blockquote>
</div>
<div class="layui-form-item">
<div class="feedback-block">
<button id="submitBtn" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
</div>
</div>
</form>
JavaScript基本内容:
1、多图片上传、预览
//多图片上传
uploadList = upload.render({
elem: '#selectImg'
,url: "/add.do"
,accept: 'images'
,acceptMime: 'image/*'
,method: 'post'
,multiple: true
,auto: false
,choose: function(obj){
files = obj.pushFile(); //将每次选择的文件追加到文件队列
//图像预览,如果是多文件,会逐个添加。(不支持ie8/9)
obj.preview(function(index, file, result){
var imgBox = document.createElement("div");//预览图、删除预览图按钮容器
var imgDelete = document.createElement("div");//删除预览图按钮
var imgobj = new Image(); //创建新img对象
imgBox.style.float = 'left';
imgBox.style.position = 'relative';
imgDelete.setAttribute('class',"feedback-delete-btn layui-icon layui-icon-close-fill");
imgDelete.setAttribute ('title','删除');
imgobj.src = result; //指定数据源
imgobj['layer-src'] = result;
imgobj.alt = file.name;
imgobj.className = 'layui-upload-img';
imgobj['layer-index'] = index;
imgBox.appendChild(imgobj);
imgBox.appendChild(imgDelete);
imgDelete.onclick = function () { // 为预览图的删除按钮绑定删除事件
delete files[index]; //删除对应的文件
document.getElementById("previewImg").removeChild(imgBox);//从预览区域移除
uploadList.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
}
document.getElementById("previewImg").appendChild(imgBox); //添加到预览区域
//photos 图片层
layer.photos({//此处目前存在bug 导致单击后无法在弹层中打开预览 下面会讲解如何处理
photos: '#previewImg'
,anim: 0
});
});
}
});
2、提交
//监听提交
form.on('submit(demo1)', function(data){
var myForm = document.getElementById("feedBackForm");
var formData = new FormData(myForm);
//循环 files(第一步choose回调中储存的对象) 逐条插入到formData
for (var i in files) {
formData.append("files",files[i]);//此处的files为上传接口参数名
}
$.ajax({
url: "/add.do",
type: "POST",
data: formData,
async: false,
contentType: false,
processData: false,
error: function () {
layer.msg('网络超时',{icon:2});
},
success: function (data) {
layer.msg('成功',{icon:1});
}
})
return false;
});
3、步骤一中 layer.photos 重复调用,导致弹层预览图无法正常显示处理:
修改layer.js源码 ,点击事件绑定之前,先用off()进行解绑,避免重复绑定,如下:
loop || parent.off('click').on('click', options.img, function(){
var othis = $(this), index = othis.attr('layer-index');
layer.photos($.extend(options, {
photos: {
start: index,
data: data,
tab: options.tab
},
full: options.full
}), true);
pushData();
})