生活随笔
收集整理的這篇文章主要介紹了
后端：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"></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及串口基礎知識硬件：斷路器、接觸器、繼電器基礎知識
總結
以上是生活随笔 為你收集整理的后端：Layui实现文件上传功能 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
