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

 <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="/UploadFiles/2021-04-02/addbanner.png">

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="/UploadFiles/2021-04-02/' + result + '">

部分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"htmlcode">

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多图上传实现删除功能的例子

            下一篇：详解从vue-loader源码分析CSS Scoped的实现