ASP.NET +Layui 多文件上传

前台:

<!--上传文件弹窗-->
    <div class="layui-upload " style="display: none" id="UploadFilebody">
        <button type="button" style="margin-top: 10px;margin-left: 10px;" class="layui-btn layui-btn-normal" id="choseFileList">选择多文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <colgroup>
                    <col>
                    <col width="150">
                    <col width="260">
                    <col width="150">
                </colgroup>
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="FileList"></tbody>
            </table>
        </div>
        <div class="footer-div">
            <button type="button" class="display:none" id="fileListSubmit"></button>
        </div>
    </div>


<script>

layui.use(['layer', 'upload', 'element'], function () {
            var upload = layui.upload,
                element = layui.element,
                layer = layui.layer;
            var $ = layui.jquery;
            var uploadListIns = upload.render({
                elem: '#choseFileList',
                elemList: $('#FileList'),
                url: core.path, //上传接口
                accept: 'file', //指定允许上传时校验的文件类型
                multiple: true, //是否允许多文件上传
                exts: 'xls|xlsx',
                auto: false, //是否选完文件后自动上传
                bindAction: '#fileListSubmit', //指向一个按钮触发上传
                //number: 20, //设置同时可上传的文件数量
                field: 'filedata', //设定文件域的字段名
                data: {
                    data: JSON.stringify({
                        "request_service": "VoucherHandle",
                        "request_item": "SalesInvoiceImport",
                        "token": core.token
                    })
                },
                before: function (obj) { //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
                    layer.load();
                }
                , choose: function (obj) {
                    var that = this;
                    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><div class="layui-progress" lay-showPercent="true" lay-filter="progressBar" > ',
                            '<div class="layui-progress-bar" lay-percent="0%" ></div>',
                            '</div ></td> ',
                            '<td>',
                            '<button class="layui-btn layui-btn-xs file-reload layui-hide">重传</button>',
                            '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                            '</td>',
                            '</tr>'].join(''));

                        //单个重传
                        tr.find('.file-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 值,以免删除后出现同名文件不可选
                        });

                        that.elemList.append(tr);
                        element.render('progress');
                    });
                }
                , done: function (data, index, upload) { //成功的回调
                    layer.closeAll('loading'); //关闭loading
                    data = JSON.parse(data.msg);
                    var that = this;
                    if (data.res) { //上传成功
                        var tr = that.elemList.find('tr#upload-' + index),
                            tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">' + data.data + '</span>');
                        tds.eq(3).html(''); //清空操作
                        delete this.files[index]; //删除文件队列已经上传成功的文件
                        layer.close(opera);
                    }
                    else {
                        this.error(index, upload, data.data, data.datatype);
                    }
                }
                , allDone: function (obj) { //多文件上传完毕后的状态回调
                    console.log(obj)
                }
                , error: function (index, upload, data, datatype) {
                    layer.closeAll('loading'); //关闭loading
                    var that = this;
                    if (datatype == 0) {
                        var tr = that.elemList.find('tr#upload-' + index),
                            tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">' + data + '</span>');
                        tds.eq(3).find('.file-reload').removeClass('layui-hide'); //重复传问题不显示重传
                    }
                    else {
                        var tr = that.elemList.find('tr#upload-' + index),
                            tds = tr.children();
                        tds.eq(2).html('<span style="color: #000000;">' + data + '</span>');
                        //tds.eq(3).find('.file-reload').removeClass('layui-hide'); //显示重传
                    }
                }
                , progress: function (n, elem, e, index) {

                    element.progress('progressBar', n + '%'); //执行进度条。n 即为返回的进度百分比
                }
            });


        });

</script> 

 

后台:

    public void ProcessRequest(HttpContext context)
    {
        string Method = context.Request.HttpMethod;
        try
        {
            if (Method.ToLower() == "post")
            {

                if (HttpContext.Current.Request.Files.Count > 0)
                {
                    var request_service = (ServiceSign)Enum.Parse(typeof(ServiceSign), HttpContext.Current.Request["request_service"].ToString()); ;
                    var request_item = HttpContext.Current.Request["request_item"];
                    var login_type = HttpContext.Current.Request["login_type"];
                    HttpPostedFile file = HttpContext.Current.Request.Files[0];
                    var path = context.Server.MapPath("~/Services/TempFile/" + file.FileName);
                    //临时文件
                    {
                        try
                        {
                          file.SaveAs(path);
                        }
                        catch (Exception ex) { }
                    }
                }
            }
        }
        catch (Exception ex)
        {

        }
    }

 

posted @ 2021-05-17 14:05  是晚安呀  阅读(617)  评论(0编辑  收藏  举报