網站首頁 編程語言 正文
本文實例為大家分享了.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
相關推薦
- 2023-04-06 python判斷列表為空的三種方法總結_python
- 2022-11-20 解析rust中的struct_Rust語言
- 2022-10-24 React報錯之Parameter?event?implicitly?has?an?any?type
- 2022-12-15 uboot添加自定義命令的實現步驟_C 語言
- 2022-05-05 基于PyQt5制作數據處理小工具_python
- 2022-08-17 Python?獲取今天任意時刻的時間戳的方法_python
- 2022-12-13 深入了解Go的HttpClient超時機制_Golang
- 2022-04-07 Redis數據庫分布式設計方案介紹_Redis
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支