日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

.Net?Core使用layui多文件上傳_實用技巧

作者:weixin_43189545 ? 更新時間: 2022-09-19 編程語言

本文實例為大家分享了.Net Core使用layui多文件上傳功能的具體代碼,供大家參考,具體內容如下

這段時間剛剛接觸了.NET Core,工作要求,從0開始,給用戶開發了一個小型的內部系統。用戶提出需求,要求能實現多文件上傳,上傳不同位置的文件,可以刪除。

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

1.前端頁面

<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(); //將每次選擇的文件追加到文件隊列
? ? ? ? ? ? ? ? ? ? ? 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]; //刪除對應的文件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? tr.remove();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免刪除后出現同名文件不可選
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //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]; //刪除文件隊列已經上傳成功的文件
? ? ? ? ? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? ? ? ? ? ? , error: function (index, upload) {
? ? ? ? ? ? ? ? ?  }
? ? ? ? ? ? ? });
? ? ? ? ? ? })
</script>

到這里的話其實就是從官網copy下來的哈哈哈,接下來的就是重點啦

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);//轉換為Json格式!
? ?  return Json(data);
}

model部分 主要就是回調json數據給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; }
? ? }
}

到這邊基本上文件上傳已經done了

上圖

原文鏈接:https://blog.csdn.net/weixin_43189545/article/details/109722105

欄目分類
最近更新