layui實現檔案或圖片上傳記錄

來源:互聯網
上載者:User

標籤:刪除檔案   inf   img   檔案   smi   htm   size   自己的   file   

首先是layui自己的官網關於圖片/檔案上傳的協助文檔:https://www.layui.com/doc/modules/upload.html

接下來是我自己的使用記錄:

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+‘">查看</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為:bootstrap3的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.最終前端實現效果如下:

layui實現檔案或圖片上傳記錄

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.