layui檔案列表上傳例項
阿新 • • 發佈:2020-07-29
layui檔案列表上傳例項
<div class="layui-inline" style="margin-left: 132px"> <label class="layui-form-label">檔案上傳</label> <div class="layui-upload" style="margin-left: 110px"> <button type="button" class="layui-btn " id="test8">選擇檔案</button> <button type="button" class="layui-btn" id="testListAction">開始上傳</button> </div> </div>
var uploadIndex; var demoListView = $('#demoList') , uploadListIns = upload.render({ elem: '#test8' , url: "/uploadFile" , accept: 'file' , multiple: true , auto: false , size: 51200 , bindAction: '#testListAction' , before: function () { uploadIndex = layer.msg('上傳中,請稍後...', {time: 0, icon: 16,shade:0.01}) }, allDone: function (obj) { if (uploadIndex) { layer.close(uploadIndex); } //防止無檔案上傳點選觸發load $("#testListAction").attr("disabled", true); } , choose: function (obj) { $('#testListAction').removeAttr("disabled"); 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 / 1024).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(); //清空 input file 值,以免刪除後出現同名檔案不可選 uploadListIns.config.elem.next()[0].value = ''; }); demoListView.append(tr); }); } , done: function (res, index, upload) { if (res.code == 0) { //上傳成功 var tr = demoListView.find('tr#upload-' + index) , tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>'); tds.eq(3).html(''); //清空操作 $('#fileCd').append(res.fileCd + ","); 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'); //顯示重傳 } });