layui 上传插件 带预览 非自动上传功能的实例(非常实用)

首先 Html部分:

<form method="post" action="?" οnsubmit="return check();" id="form">
<div class="refund-img">
<div class="refund-img-item addRefundimg" id="addImg">
<img class="proimg" src="{DT_PATH}member/images/addbanner.png">
</div>
<input type="hidden" name="thumb[]" id="proImg1">
<input type="hidden" name="thumb[]" id="proImg2">
<input type="hidden" name="thumb[]" id="proImg3">
</div>
<span class="refund-img-prompt">Max. 3 attachements. Max. 3MB for each image.</span>
<div class="comment-btn" id="comment-btn">Submit</div>
<input style="display: none;" type="submit" name="submit" id="submitForm"/>
</form>

JS部分:

//添加图片
layui.use('upload', function() {
var upload = layui.upload;//得到upload对象

var frequency = 0;//记录上传成功的个数

//多文件列表示例
var demoListView = $('.comment-imgbox.refund-img #addImg'),
uploadListIns = upload.render({ //执行实例
elem: '#addImg',//绑定文件上传的元素
url: '../upload.php',
multiple: true,
number: 3,//允许上传的数量
auto: false,
bindAction: '#comment-btn',//指向一个按钮触发上传
size:'3072',//尺寸
accept: "images",//指定允许上传时校验的文件类型
acceptMime:'image/*',只显示图片文件
exts:"jpg|png|gif|jpeg",//允许后缀
drag:"false",//是否文件拖拽上传
data:{width:400,height:400},//上传接口的额外参数
choose: function(obj) { //选择文件后的回调函数
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//如果图片3个，addImg隐藏 //假如项目只能传3个图片
if(Object.keys(files).length == 3){
$("#addImg").hide();
}

//读取本地文件 如果是多文件，则会遍历。(不支持ie8/9)
console.log(index); //得到文件索引console.log(file); //得到文件对象console.log(result); //得到文件base64编码，比如图片//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
obj.preview(function(index, file, result) {
//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
var div = $(['<div id="upload-' + index + '" class="refund-img-item exist">', '<img class="proimg" src="' + result + '">',   '<img src="../member/images/close.png" class="refund-img-close">', '</div>'].join(''));
//删除列表中对应的文件
div.find('.refund-img-close').on('click', function() {
delete files[index]; //删除对应的文件
div.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
$("#addImg").show();
});

demoListView.before(div);

});
},
before:function(){ //obj参数包含的信息，跟 choose回调完全一致如果带参 修改了layui js的before方法

return confirm("Did you confirm submitting this review? Comments scores and content will not be changeable after submission');");
//为了可以让客户在点击确定是时候有2个选择
},
done: function(res) {
//上传成功
frequency++;
$("#proImg"+frequency).val(res);//隐藏域表单赋值
alert(11);

//当节点与上传成功一致时
if($(".refund-img .exist").length == frequency){
$("#submitForm").trigger("click");//提交表单
}
},
error: function(res, index, upload) {
Dtoast("Failed to upload picture");
}
})
});

部分CSS:

.refund-img{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 30px;
}
.refund-img-item{
width: 30%;
position: relative;
}
.refund-img-item:nth-child(2){
margin: 0 5%;
}
.addRefundimg{
border: 1px dashed #BFBFBF;
}
.refund-img-item img.proimg{
width: 100%;
}
.refund-img-item input[type=file]{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
outline: none;
border: none;
opacity: 0;
}
.refund-img-close{
position: absolute;
width: 20px;
top: 0;
right: 0;
padding-right: 5px;
padding-top: 5px;
/*display: none;*/
}
.addRefundimg .refund-img-close{
/*display: none;*/
}
.refund-img-prompt{
display: block;
margin-top: 5px;
margin-bottom: 3px;
}

.refund-submit{
display: block;
text-align: center;
height: 40px;
line-height: 40px;
width: 98%;
background-color: #fc6900;
color: #fff;
font-size: 16px;
border: none;
outline: none;
margin-top: 8px;
margin-bottom: 20px;
}
.comment-btn{
width: 96%;
background-color: #fc6900;
color: #fff;
height: 36px;
text-align: center;
line-height: 36px;
display: block;
outline: none;
border: none;
margin-top: 30px;
}

我用的layui版本是layui2.2.5 它这个默认不支持阻止图片上传的，所以需要改动框架的upload.js,

改动前 （查找before快速定位）:

y=function(){return"choose"===t?l.choose&&l.choose(g):(l.before&&l.before(g),a.ie?a.ie>9?u():c():void u())};

降上面代码稍作修改 改为以下:

if("choose"===t){return l.choose&&l.choose(g)};
if(l.before&&l.before(g)){return false};
return (a.ie?a.ie>9?u():c():void u());

以上这篇layui 上传插件 带预览 非自动上传功能的实例(非常实用)就是小编分享给大家的全部内容了，希望能给大家一个参考

您可能感兴趣的文章:

• layui扩展上传组件模拟进度条的方法
• layui文件上传控件带更改后数据传值的方法
• layui文件上传实现代码