微客导航 » 文章资讯 » layui 上传插件带预览非自动上传功能的实例(非常实用)

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

2023-08-13 18:30:05 176

首先Html部分:

Max.3attachements.Max.3MBforeachimage. Submit

JS部分:

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


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


//多文件列表示例
vardemoListView=$('.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){//选择文件后的回调函数
varfiles=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);//对上传失败的单个文件重新上传，一般在某个事件中使用
vardiv=$(['','','','

'].join('')); //删除列表中对应的文件 div.find('.refund-img-close').on('click',function(){ deletefiles[index];//删除对应的文件 div.remove(); uploadListIns.config.elem.next()[0].value='';//清空inputfile值，以免删除后出现同名文件不可选 $("#addImg").show(); }); demoListView.before(div); }); }, before:function(){//obj参数包含的信息，跟choose回调完全一致如果带参修改了layuijs的before方法 returnconfirm("Didyouconfirmsubmittingthisreview?Commentsscoresandcontentwillnotbechangeableaftersubmission');"); //为了可以让客户在点击确定是时候有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("Failedtouploadpicture"); } }) });

部分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:05%;
}
.addRefundimg{
border:1pxdashed#BFBFBF;
}
.refund-img-itemimg.proimg{
width:100%;
}
.refund-img-iteminput[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():voidu())};

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

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

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐

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