后端:Layui實現文件上傳功能

今天給大家分享采用AspNet MVC+前端框架LayUi實現文件上傳功能,感興趣的朋友可以學習一下。

文件上傳實體(UploadFile.cs)

  public class UploadFile{public?int?code?{?get;?set;?}???//請求codepublic?string?msg?{?get;?set;?}?//?請求消息public?string?src?{?get;?set;?}?//文件路徑public?string?filename?{?get;?set;?}?//原始文件名}

前端代碼(Upload.cshtml):

@{Layout = null;
}
<!DOCTYPE?html>
<html>
<head><meta name="viewport" content="width=device-width" /><title>文件上傳示例</title><link href="~/Content/lib/layui/css/layui.css" rel="stylesheet" /><link href="~/Content/css/common.css" rel="stylesheet" /><script src="~/Content/lib/layui/layui.js"></script>
</head>
<body><div><div class="layui-input-inline layui-btn-container" style="width: auto;"><button type="button" class="layui-btn layui-btn-primary" id="btnUpload"><i class="layui-icon">&#xe67c;</i>上傳附件</button><div id="layer-photos-demo" class="fr"><img id="imgPhoto" style="height:100px;width:100px;"src="" alt=""></div></div><div><table class="layui-table"><colgroup><col width="150"><col?width="200"></colgroup><thead><tr><th>文件名稱</th><th>操作</th></tr></thead><tbody id="uploadList"></tbody></table></div></div><script type="text/javascript">layui.use(["upload"], function () {var upload = layui.upload;var $ = layui.$;upload.render({elem: '#btnUpload',url: '/Upload/UploadFile',size:?'2048',//文件大小2Mexts:?'png|gif|jpg|jpeg|zip|rar',//文件擴展名done: function (res) {if?(res.code?==?0)?{$("#imgPhoto").attr("src", res.src);$("#uploadList").append("<tr><td>" + res.filename + "</td><td><a target='_blank' href='" + res.src + "'>查看</a></td><tr>");}}});});
</script>
</body>
</html>

控制器代碼(UploadController.cs)

 // 上傳視圖public ActionResult Upload()
{return View();}// 上傳邏輯
public JsonResult UploadFile(){UploadFile uploadFile = new UploadFile();try{var file = Request.Files[0];    //獲取選中文件var filecombin = file.FileName.Split('.');if (file == null || string.IsNullOrEmpty(file.FileName) || file.ContentLength == 0 ||filecombin.Length < 2){uploadFile.code = -1;uploadFile.src = "";uploadFile.msg = "上傳失敗!請檢查文件";return Json(uploadFile, JsonRequestBehavior.AllowGet);}//定義本地路徑位置string localPath = Server.MapPath("~/Upload");string filePathName = string.Empty; //最終文件名string dateStr = DateTime.Now.ToString("yyyyMMddHHmmss");filePathName = dateStr + "." + filecombin[1];//Upload不存在則創建文件夾if (!System.IO.Directory.Exists(localPath)){System.IO.Directory.CreateDirectory(localPath);}//保存圖片file.SaveAs(Path.Combine(localPath, filePathName));uploadFile.code = 0;uploadFile.filename = filecombin[1];uploadFile.src = Path.Combine("/Upload/",filePathName);uploadFile.msg = "上傳成功";return Json(uploadFile, JsonRequestBehavior.AllowGet);}catch (Exception){uploadFile.code = -1;uploadFile.src = "";uploadFile.msg = "上傳失敗!";return Json(uploadFile, JsonRequestBehavior.AllowGet);}}

IT技術分享社區

文章推薦程序員效率:畫流程圖常用的工具程序員效率:整理常用的在線筆記軟件遠程辦公:常用的遠程協助軟件,你都知道嗎?51單片機程序下載、ISP及串口基礎知識硬件:斷路器、接觸器、繼電器基礎知識

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/271717.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/271717.shtml
英文地址,請注明出處:http://en.pswp.cn/news/271717.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

linux arp 防火墻關閉,如何關閉ARP防火墻

360安全衛士和QQ電腦管家都提供了ARP防火墻&#xff0c;但該功能對于家庭用戶沒有任何意義.那么該如何關閉它呢?下面是學習啦小編收集整理的如何關閉ARP防火墻&#xff0c;希望對大家有幫助~~關閉ARP防火墻的方法工具/原料360安全衛士QQ電腦管家如何關閉360安全衛士的ARP防火墻…

復習知識點:UITableView和UICollectionView的常用屬性

UITableView UICollectionView //UICollectionViewLayout //UICollectionViewLayout決定了UICollectionView如何顯示在界面上&#xff0c;Apple提供了一個最簡單的默認layout對象&#xff1a;UICollectionViewFlowLayout。 //Flow Layout是一個Cells的線性布局方案&#xff0c;…

ASP.NET+MVC+使用+Log4net+記錄日志筆記

前言&#xff1a;記錄系統中的日志&#xff0c;是一個好的項目產品必備的一個環節。每一個產品最終的目的都是要交予客戶使用&#xff0c;因為程序員代碼的開發水平參差不齊&#xff0c;Bug就成為了項目運維成本最大的因素之一。如何降低項目運維的成本呢&#xff0c;最重要的是…

git分支feature和hotfix分支

master: 主分支&#xff0c;主要用來版本發布。develop&#xff1a;日常開發分支&#xff0c;該分支正常保存了開發的最新代碼。feature&#xff1a;具體的功能開發分支&#xff0c;只與 develop 分支交互。release&#xff1a;release 分支可以認為是 master 分支的未測試版。…

linux查看鏡像的詳細信息,docker inspect命令查看鏡像詳細信息

# docker inspect ubuntu:18.04 // 查看鏡像的詳細信息[{"Id": "sha256:d131e0fa2585a7efbfb187f70d648aa50e251d9d3b7031edf4730ca6154e221e","RepoTags": ["ubuntu:18.04"],"RepoDigests": ["ubuntusha256:d26d529da…

Golang使用pkg-config自動獲取頭文件和鏈接庫的方法

為了能夠重用已有的C語言庫&#xff0c;我們在使用Golang開發項目或系統的時候難免會遇到Go和C語言混合編程&#xff0c;這時很多人都會選擇使用cgo。 話說cgo這個東西可算得上是讓人又愛又恨&#xff0c;好處在于它可以讓你快速重用已有的C語言庫&#xff0c;無需再用Golang重…

數據庫:SQLServer中with as 用法筆記

一、with as 概念介紹with as 也叫做子查詢部分&#xff08;subquery factoring&#xff09;&#xff0c;可以定義一個SQL段落&#xff0c;該SQL段落可以被整個SQL語句所用到類似于臨時表的作用。with as 可以提高你的SQL語句的可讀性&#xff0c;也有可以用在在UNION ALL的不同…

單詞

Screenshot 屏幕截圖,截圖 Dashboard n. 儀表盤 subscribe vt. 簽署&#xff1b;贊成&#xff1b;捐助 vi. 訂閱&#xff1b;捐款&#xff1b;認購&#xff1b;贊成&#xff1b;簽署 performance n. 性能&#xff1b;績效&#xff1b;表演&#xff1b;執行 optimization …

數據庫優化:SqlServer的with(nolock)關鍵字的用法介紹

一、with(nolock)的介紹數據庫寫查詢語句的時候,為了提升查詢性能,往往會在查詢的表后面加一個nolock,或者是with(nolock),其目的就是查詢的時候是不鎖定表,從而提高查詢速度的目的。但如果同一時間有多個用戶訪問同一資源的時候&#xff0c;如果并發用戶對該資源做了修改。則會…

對layoutInflater的理解

參考該博客&#xff1a;http://www.cnblogs.com/top5/archive/2012/05/04/2482328.html LayoutInflater是一個抽象類&#xff0c;通過調用其實例方法inflate()&#xff0c;將res/layout下的xml布局文件進行實例化&#xff0c;不同于findvirebyid()是找布局文件下的控件進行實例…

linux /root /etc,Linux知識:/root/.bashrc與/etc/profile的異同

要搞清bashrc與profile的區別&#xff0c;首先要弄明白什么是交互式shell和非交互式shell&#xff0c;什么是login shell 和non-login shell。交互式模式就是shell等待你的輸入&#xff0c;并且執行你提交的命令。這種模式被稱作交互式是因為shell與用戶進行交互。這種模式也是…

java多線程售票例子

代碼如下: public class Ticket1 implements Runnable {private int tickets 100;Overridepublic void run() {while (tickets > 0) {synchronized (Ticket.class) {if (tickets > 0) {tickets--;System.out.println(Thread.currentThread().getName() "正在賣票&…

推薦一款免費國產遠程辦公神器ToDesk,TeamViewer完美替代品

對于從事IT行業的人員來說&#xff0c;遠程軟件基本上是必備的軟件。之前使用用TeamViewer遠程辦公軟件&#xff0c;它的穩定性、延遲低、功能齊全很受廣大開發者的歡迎。唯一美中不足的是它是一款商業軟件。費用比較高。到現在基本上所有破解工具都無效了。所以不得不放棄這款…

[iOS] photoKit獲取所有照片

代碼: - (NSMutableArray *)getAllPhoto{NSMutableArray *arr [NSMutableArray array];// 所有智能相冊PHFetchResult *smartAlbums [PHAssetCollection fetchAssetCollectionsWithType:PHAssetCollectionTypeSmartAlbum subtype:PHAssetCollectionSubtypeAlbumRegular optio…

用python寫linux中的ls,Python實現Linux環境下的ls命令

在Linux下使用ls命令結合正則表達式&#xff0c;能夠高效地進行文件搜索&#xff0c;并通過參數操作文件&#xff0c;于是就想用Python實現這個功能以便在Windows上使用import osimport reimport syspath os.getcwd()substr raw_input(The sub-string of the file (Support f…

蘋果臺式電腦怎么開機_龍華蘋果電腦回收公司,臺式電腦回收公司電話

龍華蘋果電腦回收公司,臺式電腦回收公司電話oDYIHx 通常液晶顯示器有VGA和DVI兩種種接口&#xff0c;其中VGA接口在長時間顯示后悔出現畫面模糊情況&#xff0c;需要校正才能恢復&#xff0c;然而DVi接口傳輸就比較穩定&#xff0c;它屬于全數字無損傳輸信號&#xff0c;在長…

AtomicInteger使用非阻塞算法,實現并發控制多線程實現售票

代碼如下: public class TicketDemo implements Runnable {private static volatile AtomicInteger ticketSum new AtomicInteger(20);private static int finalTotal 0;Overridepublic void run() {int count;while ((count ticketSum.decrementAndGet()) > 0) {System.…

數據庫:SQLServer 實現行轉列、列轉行用法筆記

在許多的互聯網項目當中&#xff0c;報表開發是整個項目當中很重要的一個功能模塊。其中會有一些比較復雜的報表統計需要行轉列或者列轉行的需求。今天給大家簡單介紹一下在SQLServer當中如何使用PIVOT、UNPIVOT內置函數實現數據報表的行轉列、列轉行。有需要的朋友可以一起學習…

硬件知識:串口通訊的起始、數據、停止位是怎么分配的?

串口是串行接口&#xff08;serial port&#xff09;的簡稱&#xff0c;也稱為串行通信接口或COM接口。串口通信是指采用串行通信協議&#xff08;serial communication&#xff09;在一條信號線上將數據一個比特一個比特地逐位進行傳輸的通信模式。串口按電氣標準及協議來劃分…

ES5 getter setter

最近在學習vuejs&#xff0c;了解到內部實現使用到了es5的Getters和Setters。之前看高程的時候&#xff0c;沒有重視這塊&#xff0c;今天查看一下文檔&#xff0c;了解了他們的作用&#xff0c;再次記錄一下&#xff0c;可供以后查看和共享。 定義Getters和Setters&#xff1a…