layui d多文件上傳

借閱

http://www.layui.com/demo/upload.html

 

前端代碼

<form class="layui-form" action="#" method="post" style="margin-top:50px" id>

<div class="layui-upload">

  <button type="button" class="layui-btn layui-btn-normal" id="testList">選擇多文件</button>

  <div class="layui-upload-list">

    <table class="layui-table">

      <thead>

        <tr><th>圖片</th>

        <th>大小</th>

        <th>狀態</th>

        <th>操做</th>

      </tr></thead>

      <tbody id="demoList">

      <notempty name="list">

      <volist name="list" id="vo">

      <tr>

<th><img src="__ROOT__/Uploads/{$vo.img}" style="width:60px;height:60px"></th>

        <th>不計</th>

        <th>在線</th>

        <th><div class="layui-btn layui-btn-mini layui-btn-danger" onclick="imgDel({$vo['img_id']})">刪除</div></th>

    </tr>

      </volist>

      </notempty>

      </tbody>

    </table>

  </div>

  <button type="button" class="layui-btn" id="testListAction">開始上傳</button>

  <input type="hidden" name="sid" value="{$_GET['id']}" />

  <input class="layui-btn" type="submit" value="提交"></button>

</div>

</form>

JS 代碼

 

layui.use('upload', function(){

  var upload = layui.upload;

   console.log(upload);

  //執行實例

 

//多文件列表示例

  var demoListView = $('#demoList')

  ,uploadListIns = upload.render({

    elem: '#testList'

    ,url: '{:U("Admana/uploadAll")}'

    ,accept: 'file'

    ,multiple: true

    ,auto: false

    ,bindAction: '#testListAction'

    ,choose: function(obj){  

      var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列

      //讀取本地文件

      obj.preview(function(index, file, result){

        var tr = $(['<tr id="upload-'+ index +'">'

          ,'<td><img src='+result+' style="width:60px;height:60px"></td>'

          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'

          ,'<td>等待上傳</td>'

          ,'<td>'

//             ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重傳</button>'

            ,'<button class="layui-btn layui-btn-mini 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){

    if(res.img != ''){

 

        var tr = demoListView.find('tr#upload-'+ index),tds = tr.children();

        tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>');

        tds.eq(3).html(''); //清空操做

        var str = '<input type="hidden" name="photo[]" value='+res.img+'>';

    $('#demoList').append(str);

        return delete this.files[index]; //刪除文件隊列已經上傳成功的文件

       }

      this.error(index, upload);

    }

    ,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'); //顯示重傳

    }

  });

});