layui 上傳插件 帶預覽 非自動上傳功能的實例(非常實用)

今天小編就爲大家分享一篇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 上傳插件 帶預覽 非自動上傳功能的實例(非常實用)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持神馬文庫。