.Net?Core使用layui多文件上傳
本文實(shí)例為大家分享了.Net Core使用layui多文件上傳功能的具體代碼,供大家參考,具體內(nèi)容如下
這段時(shí)間剛剛接觸了.NET Core,工作要求,從0開(kāi)始,給用戶開(kāi)發(fā)了一個(gè)小型的內(nèi)部系統(tǒng)。用戶提出需求,要求能實(shí)現(xiàn)多文件上傳,上傳不同位置的文件,可以刪除。
找來(lái)找去還是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下來(lái)的哈哈哈,接下來(lái)的就是重點(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了
上圖
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ASP.NET MVC 3實(shí)現(xiàn)訪問(wèn)統(tǒng)計(jì)系統(tǒng)
我們將介紹用ASP.NET MVC 3實(shí)現(xiàn)一個(gè)訪問(wèn)統(tǒng)計(jì)系統(tǒng),包括統(tǒng)計(jì)代碼和Cookie等方面,希望對(duì)大家有所幫助。2015-10-10asp.net網(wǎng)站防惡意刷新的Cookies與Session解決方法
這篇文章主要介紹了asp.net網(wǎng)站防惡意刷新的Cookies與Session解決方法,分別以實(shí)例的形式講述了采用cookie法與session法實(shí)現(xiàn)WEB頁(yè)面防止惡意刷新的技巧,需要的朋友可以參考下2014-09-09asp.net ext treepanel 動(dòng)態(tài)加載XML的實(shí)現(xiàn)方法
當(dāng)你在asp.net下面 使用Ext TreePanel直接加載服務(wù)器上XML文件會(huì)出現(xiàn)樹不能顯示,樹據(jù)不能正確加載的問(wèn)題。2008-10-10ABP入門系列之分頁(yè)功能的實(shí)現(xiàn)
本節(jié)主要講解了如何使用ABP進(jìn)行后臺(tái)分頁(yè),并順帶講解了ABP后臺(tái)分頁(yè)邏輯的實(shí)現(xiàn)方式。同時(shí)也演示了如何使用X.PagedList進(jìn)行前端分頁(yè)2017-03-03asp.net BasePage類+Session通用用戶登錄權(quán)限控制
判斷用戶是否登錄,常用的方法就是通過(guò)Session來(lái)控制。2010-05-05動(dòng)態(tài)生成table并實(shí)現(xiàn)分頁(yè)效果心得分享
動(dòng)態(tài)生成table并實(shí)現(xiàn)分頁(yè)在開(kāi)發(fā)過(guò)程中時(shí)一個(gè)很好的應(yīng)用,接下來(lái)本文也要實(shí)現(xiàn)一個(gè)類似效果,感興趣的朋友可以參考下哈2013-04-04.NET之生成數(shù)據(jù)庫(kù)全流程實(shí)現(xiàn)
這篇文章主要介紹了.NET之生成數(shù)據(jù)庫(kù)全流程實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05從EFCore上下文的使用到深入剖析DI的生命周期最后實(shí)現(xiàn)自動(dòng)屬性注入
這篇文章主要介紹了從EFCore上下文的使用到深入剖析DI的生命周期最后實(shí)現(xiàn)自動(dòng)屬性注入,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01