.Net?Core使用layui多文件上傳

更新時(shí)間：2022年07月26日 14:59:26 作者：weixin_43189545

這篇文章主要為大家詳細(xì)介紹了.Net?Core使用layui多文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了.Net Core使用layui多文件上傳功能的具體代碼，供大家參考，具體內(nèi)容如下

這段時(shí)間剛剛接觸了.NET Core,工作要求，從0開始，給用戶開發(fā)了一個(gè)小型的內(nèi)部系統(tǒng)。用戶提出需求，要求能實(shí)現(xiàn)多文件上傳，上傳不同位置的文件，可以刪除。

找來找去還是layui的文件上傳符合審美，不多廢話上代碼

1.前端頁(yè)面

<div class="layui-upload">
? ? ?<button type="button" class="layui-btn layui-btn-normal" id="testList">Search</button>
? ? ?<div class="layui-upload-list">
? ? ? ? ? ?<table class="layui-table">
? ? ? ? ? ?  <thead>
? ? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ?<th>File Name</th>
? ? ? ? ? ? ? ?<th>Size</th>
? ? ? ? ? ? ? ?<th>Status</th>
? ? ? ? ? ? ? ?<th>Action</th>
? ? ? ? ? ? ? ?</tr>
? ? ? ? ? ?  </thead>
? ? ? ? ? ? <tbody id="demoList"></tbody>
? ? ? ? ?</table>
? ? ? </div>
? <button type="button" class="layui-btn" id="testListAction" onclick="noFile()">Upload</button>
</div>

script部分

<script>
? ?layui.use('upload', function () {
? ? ? ? var upload = layui.upload;
? ? ? ? var demoListView = $('#demoList')
? ? ? ? ? ?  , uploadListIns = upload.render({
? ? ? ? ? ? ? ? elem: '#testList'
? ? ? ? ? ? ? ? , url: '你的文件上傳接口'
? ? ? ? ? ? ? ? , accept: 'file'
? ? ? ? ? ? ? ? , multiple: true
? ? ? ? ? ? ? ? , size: 30000
? ? ? ? ? ? ? ? , auto: false
? ? ? ? ? ? ? ? , bindAction: '#testListAction'
? ? ? ? ? ? ? ? ?, choose: function (obj) {
? ? ? ? ? ? ? ? ? ? ? var files = this.file = obj.pushFile(); //將每次選擇的文件追加到文件隊(duì)列
? ? ? ? ? ? ? ? ? ? ? console.log(uploadListIns);
? ? ? ? ? ? ? ? ? ? ? //讀取本地文件
? ? ? ? ? ? ? ? ? ? ? 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>Wait to upload</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">Delete</button>'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? , '</td>'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? , '</tr>'].join(''));
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //刪除
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? tr.find('.demo-delete').on('click', function () {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? delete files[index]; //刪除對(duì)應(yīng)的文件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? tr.remove();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現(xiàn)同名文件不可選
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //console.log(files);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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;">Success</span>');
? ? ? ? ? ? ? ? ? ? ? ? ? ? tds.eq(3).html(''); //清空操作
? ? ? ? ? ? ? ? ? ? ? ? ? ? return delete this.files[index]; //刪除文件隊(duì)列已經(jīng)上傳成功的文件
? ? ? ? ? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? ? ? ? ? ? , error: function (index, upload) {
? ? ? ? ? ? ? ? ?  }
? ? ? ? ? ? ? });
? ? ? ? ? ? })
</script>

到這里的話其實(shí)就是從官網(wǎng)copy下來的哈哈哈，接下來的就是重點(diǎn)啦

2.后端部分

這里是controller部分

public async Task<IActionResult> UploadFiles(List<IFormFile> file)
? ? ? ? {
? ? ? ? ? ? EditorDataResult editorResult = new EditorDataResult();
? ? ? ? ? ? foreach (var formFile in file)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? if (formFile.Length > 0)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? FileInfo fi = new FileInfo(formFile.FileName);
? ? ? ? ? ? ? ? ? ? string ext = fi.Extension;
? ? ? ? ? ? ? ? ? ? var orgFileName = fi.Name;
? ? ? ? ? ? ? ? ? ? var newFileName = Guid.NewGuid() + ext;
? ? ? ? ? ? ? ? ? ? var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "你想要上傳到文件夾");
? ? ? ? ? ? ? ? ? ? var filePath = Path.Combine(uploads, newFileName);
? ? ? ? ? ? ? ? ? ? using (var stream = new FileStream(filePath, FileMode.Create))
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? await formFile.CopyToAsync(stream);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? editorResult.code = 0;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? editorResult.code = 1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ?  JavaScriptSerializer jss = new JavaScriptSerializer();
? ? ?string data = jss.Serialize(editorResult);//轉(zhuǎn)換為Json格式!
? ?  return Json(data);
}

model部分主要就是回調(diào)json數(shù)據(jù)給layui

namespace LayuiMvc.Common.Result
{
? ? public class EditorDataResult
? ? {
? ? ? ? public int code { get; set; }
? ? ? ? public string msg { get; set; }
? ? ? ? public Dictionary<string, string> data { get; set; }
? ? }
}

到這邊基本上文件上傳已經(jīng)done了

上圖