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

浙公网安备 33010602011771号