.Net?Core使用layui多文件上傳
本文實(shí)例為大家分享了.Net Core使用layui多文件上傳功能的具體代碼,供大家參考,具體內(nèi)容如下
這段時(shí)間剛剛接觸了.NET Core,工作要求,從0開(kāi)始,給用戶(hù)開(kāi)發(fā)了一個(gè)小型的內(nèi)部系統(tǒng)。用戶(hù)提出需求,要求能實(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-10
asp.net網(wǎng)站防惡意刷新的Cookies與Session解決方法
這篇文章主要介紹了asp.net網(wǎng)站防惡意刷新的Cookies與Session解決方法,分別以實(shí)例的形式講述了采用cookie法與session法實(shí)現(xiàn)WEB頁(yè)面防止惡意刷新的技巧,需要的朋友可以參考下2014-09-09
asp.net ext treepanel 動(dòng)態(tài)加載XML的實(shí)現(xiàn)方法
當(dāng)你在asp.net下面 使用Ext TreePanel直接加載服務(wù)器上XML文件會(huì)出現(xiàn)樹(shù)不能顯示,樹(shù)據(jù)不能正確加載的問(wèn)題。2008-10-10
ABP入門(mén)系列之分頁(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-03
asp.net BasePage類(lèi)+Session通用用戶(hù)登錄權(quán)限控制
判斷用戶(hù)是否登錄,常用的方法就是通過(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è)類(lèi)似效果,感興趣的朋友可以參考下哈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

