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) { } }