【转】layui的多文件列表上传功能前端代码

原文地址：https://www.cnblogs.com/front-girl/p/10576328.html

html页面的代码（注意：引入layui相关的css）：

<div class="layui-upload" style="margin-left: 130px">
            <button type="button" class=" layui-btn" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button>
            <div class="layui-upload-list layui-upList-minHeight">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="demoList">
                        <tr id="upload">
                            <td>xxx.txt</td>
                            <td>xxxkb</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" disabled>删除</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--            <div class="layui-form-item layui-btn-Center">
                    <div class="layui-input-block text-right">
                        <button type="button" class="layui-btn layui-btn-xs" id="choiceListAction">开始上传</button>
                        <button class="btn layui-btn layui-btn-xs layui-btn-primary js_close" id="quXiao" type="button">取消</button>
                    </div>
                </div> -->
 
        </div>  

js的编写（引入layui相关的js）：

layui.use(['upload','form','layer','laydate'], function(){
          var $ = layui.jquery
          ,upload = layui.upload
          ,form = layui.form;
           
          //多文件列表示例
        $(function() {
            var uploadFile = {
                init: function() {
                    this.upload();
                },
                //上传文件
                upload: function() {
                    layui.use('upload', function() {
                        var $ = layui.jquery,
                            upload = layui.upload;
                        //多文件列表示例
                        var demoListView = $('#demoList'),
                            uploadListIns = upload.render({
                                elem: '#choiceList',
                                url: '__PUBLIC__/static/file/uploadFile',
                                accept: 'file',
                                multiple: true,
                                auto: true,
                                bindAction: '#choiceListAction',
                                choose: function(obj) {
                                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                                    //读取本地文件
                                    obj.preview(function(index, file, result) {
                                        if($('#demoList tr td').eq(0).text() == 'xxx.txt') {
                                            $('#demoList').empty();
                                        }
                                        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) {
                                    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(''); //清空操作
                                        return delete this.files[index]; //删除文件队列已经上传成功的文件
 
                                    }
                                    this.error(index, upload, res.msg);
                                },
                                error: function(index, upload, msg) {
                                    var tr = demoListView.find('tr#upload-' + index),
                                        tds = tr.children();
                                    tds.eq(2).html('<span style="color: #FF5722;">' + msg + '</span>');
                                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                                }
                            });
                    });
                }
 
            }
            uploadFile.init();
        });
 
    });

效果图

 实战

<form class="layui-form" action=""  style="padding-top:30px;padding:10px;">
    <fieldset class="layui-elem-field layui-field-title">
    <legend>请选择要上传的资料(温馨提示：同时上传文件不能超过5个)</legend>
    </fieldset>  
  <div class="layui-upload">
      <button type="button" class="layui-btn" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button>
      <div class="layui-upload-list layui-upList-minHeight">
          <table class="layui-table">
              <thead>
                  <tr>
                      <th>文件名</th>
                      <th>大小</th>
                      <th>状态</th>
                      <th>操作</th>
                  </tr>
              </thead>
              <tbody id="demoList">                
              </tbody>
          </table>
      </div>
      <div class="layui-form-item" style="text-align: center;">
            <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-sm uploadpic" id="btnUpload"><i class="layui-icon">&#xe681;</i>开始上传</button>
            </div>
      </div> 
</div>
</form>

js

layui.use(['upload', 'form', 'layer', 'laydate', 'publicJs'], function () {
    var $ = layui.jquery
    , upload = layui.upload
    , form = layui.form
    ,pl = layui.publicJs;
    //多文件列表示例
    $(function () {
        var uploadFile = {
            _localData:{
                StockId: "",
                BatchNo: "",
            },
            init: function () {
                var stockId = pl._Requst('stockId');
                var batchNo = pl._Requst('batchNo');
                if (!stockId) {
                    pl.Msg.error("商品Id无效！");
                    return;
                }
                if (!batchNo) {
                    pl.Msg.error("批号无效！");
                    return;
                }
                this._localData.StockId = stockId;
                this._localData.BatchNo = batchNo;
                this.upload();
            },           
            //上传文件
            upload: function () {
                var stockId = this._localData.StockId;
                var batchNo = this._localData.BatchNo;

                layui.use('upload', function () {
                    var $ = layui.jquery,
                        upload = layui.upload;
                    //多文件列表示例
                    var demoListView = $('#demoList'),
                        uploadListIns = upload.render({
                            elem: '#choiceList',
                            url:pl._config.ApiUrl + '/api/InStocksBXX/UpLoadImage',
                            accept: 'file',
                            multiple: true,
                            number:5,
                            auto: false, //选择文件后不自动上传
                            bindAction: '#btnUpload',
                            before: function (obj) {                                
                                this.url = pl._config.ApiUrl + '/api/InStocksXX/UpLoadImage?StockId=' + stockId + "&BatchNo=" + batchNo;
                            },
                            headers: { token: pl.cookie.get("loginUser") },
                            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) {                             
                                if (res.errorCode =="00")
                                { //上传成功
                                    var tr = demoListView.find('tr#upload-' + index),
                                        tds = tr.children();
                                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                    tds.eq(3).html(''); //清空操作
                                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                                }
                                this.error(index, upload, res.msg);
                            },
                            error: function (index, upload, msg) {                              
                                var tr = demoListView.find('tr#upload-' + index),
                                    tds = tr.children();
                                tds.eq(2).html('<span style="color: #FF5722;">' + msg + '</span>');
                                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                            },
                            allDone: function (obj) {
                                if (obj.total != obj.successful)
                                {
                                    pl.Msg.error("有图片上传失败！");
                                    return;
                                }
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index); 
                            },
                        });
                });
            }

        }
        uploadFile.init();
    });
});

后台接口方法

 /// <summary>
        /// 上传图片
        /// </summary>
        /// <param name="model">StockId-商品ID,BatchNo-商品批号</param>
        /// <returns></returns>
        [HttpPost]
        public HttpResponseMessage UpLoadImage([FromUri]RequestInStocksBatchSufixx model)
        {
            var files = System.Web.HttpContext.Current?.Request?.Files;

            HttpResponseMessage message = new HttpResponseMessage
            {
                Content = new StringContent((_service.UpLoadImage(model, files, UserInfo)).ToJson(), Encoding.UTF8, "text/html"),
                StatusCode = HttpStatusCode.OK
            };

            return message;
        }