layui 파일 이나 이미지 업로드 기록 구현

본 고 는 layui 가 파일 이나 이미지 업로드 기록 을 실현 하 는 구체 적 인 코드 를 공유 하여 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
먼저 layui 자신의 홈 페이지 에서 사진/파일 업로드 에 관 한도움말 문서:
다음은 나의 사용 기록 이다.
1.우선 js 에서 전역 변 수 를 정의 합 니 다.

var uploadListIns;

2.할당 진행

//       
/**
 *     
 */
layui.use('upload', function(){
 var $ = layui.jquery,upload = layui.upload;
 var demoListView = $('#proImageList');
 uploadListIns = upload.render({
  elem: '#chooseFile', //       
  url: 'upload!ftp.action', //           
  data:{'serviceName':'             ','tableName':'T_OUTSOURCE_ORDER','fileType':'  '},
  accept: 'file', 
  multiple: true,  //         
  acceptMime: 'image/*', //          ，        
  field:'upload',  
  auto: false, 
  bindAction: '#upload', //         ID
  choose: function(obj){ //          ，               
   var files = this.files = obj.pushFile(); //               
   //      
   obj.preview(function(index, file, result){
    var tr = $(['<tr id="upload-'+ index +'">'
     ,'<td>'+ file.name +'</td>'
     ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
     ,'<td>    </td>'
     ,'<td>'
     ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">  </button>'
     ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">  </button>'
     ,'</td>'
     ,'</tr>'].join(''));
 
    //    
    tr.find('.demo-reload').on('click', function(){
     obj.upload(index, file);
    });
 
    //  
    tr.find('.demo-delete').on('click', function(){
     delete files[index]; //       
     tr.remove();
     uploadListIns.config.elem.next()[0].value = ''; //   input file  ，              
    });
    demoListView.append(tr);
   });
  },  
  done: function(res, index, upload){    //      ，                      
   console.info(res);
   if(res.status == "success"){ //    
    var tr = demoListView.find('tr#upload-'+ index)
     ,tds = tr.children();
    tds.eq(2).html('<span style="color: #5FB878;">    </span>');
    tds.eq(3).html('<a href="'+res.url+'" rel="external nofollow" >  </a>'); //    
    return delete this.files[index]; //               
   }else{
    alert(res.message);
   }
   this.error(index, upload);
  },
  allDone: function(obj){ //         ，   
   if(obj.total > obj.successful){
    layer.msg("       ，        ，         ");
   }else {
    //      
    updateProductionSchedule(currentId, currentSchedule);
   }
  },
  error: function(index, upload){
   var tr = demoListView.find('tr#upload-'+ index)
    ,tds = tr.children();
   tds.eq(2).html('<span style="color: #FF5722;">    </span>');
   tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //    
  }
 });
 $(".layui-upload-file").hide();
});

상기 js 코드 에 나타 난 html 요 소 는 다음 과 같 습 니 다.관련 도입 js 파일 과 css 는 bootstrap 3 의 js 와 css 및 layui 의 js 파일 입 니 다.

<!--    （Modal） -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    <h4 class="modal-title" id="myModalLabel">
           
    </h4>
   </div>
   <div class="modal-body">
    <button type="button" class="btn btn-primary" id="chooseFile">     </button>
    <button type="button" class="btn btn-success" id="upload">    </button>
    <div class="table-responsive">
     <table class="table table-hover">
      <thead><tr>
       <th>   </th>
       <th>  </th>
       <th>  </th>
       <th>  </th>
      </tr></thead>
      <tbody id="proImageList"></tbody>
     </table>
    </div>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">  
    </button>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>

3.모드 상 자 를 열 때 1 에서 정 의 된 변 수 를 동적 으로 할당 할 수 있 습 니 다.이 변 수 는 배경 으로 전 달 됩 니 다.

function showUploadModal(id) {
 //    
 uploadListIns.config.data.tableRecordId = id;
 uploadListIns.config.data.filenamePrefix = id+".  pass.";
 $("#uploadModal").modal("show");
}

4.최종 전단 실현 효 과 는 다음 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.