借閱 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>狀態(tài)</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" οnclick="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); //執(zhí)行實例 //多文件列表示例 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'); //顯示重傳 } }); });

轉載于:https://www.cnblogs.com/JdsyJ/p/8671022.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的layui d多文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。