后端:Layui实现文件上传功能

后端:Layui实现文件上传功能



后端:Layui实现文件上传功能

今天给大家分享采用AspNet MVC+前端框架LayUi实现文件上传功能,感兴趣的朋友可以学习一下。

文件上传实体(UploadFile.cs)

 public class UploadFile {        public int code { getset; }   //请求code        public string msg { getset; } // 请求消息        public string src { getset; } //文件路径        public string filename { getset; } //原始文件名 }

前端代码(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',//文件大小2M                exts: '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技术分享社区

后端:Layui实现文件上传功能


文章推荐
程序员效率:画流程图常用的工具
程序员效率:整理常用的在线笔记软件
远程办公:常用的远程协助软件,你都知道吗?
51单片机程序下载、ISP及串口基础知识
硬件:断路器、接触器、继电器基础知识


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2501.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • jQuery ajax 例子「建议收藏」

    jQuery ajax 例子「建议收藏」 转自http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html使用jQuery将使

  • native2ascii用法

    native2ascii用法背景:在做Java开发的时候,常常会出现一些乱码,或者无法正确识别或读取的文件,比如常见的validator验证用的消息资源(properties)文件就需要进行Unicode重新编码。原因是java默认的编码方式为Unicode,而我们的计算机系统编码常常是GBK等编码。需要将系统的编码转换为java正确识别的编码问题就解决了。 1、native2ascii简介:native2ascii是s…

  • cf卡,mmc卡,sd卡,sm卡,xd卡,记忆棒的区别是什么?[通俗易懂]

    cf卡,mmc卡,sd卡,sm卡,xd卡,记忆棒的区别是什么?[通俗易懂]乐乐[学长] CF卡(CompactFlash)CF卡是1994年由SanDisk最先推出的。CF卡具有PCMCIA-ATA功能,并与之兼容;CF卡重量只有14g,仅纸板火柴般大小(43mm×36mm×3.3mm),是一种固态产品,也就是工作时没有运动部件。CF卡采用闪存(flash)技术,是一种稳定的存储解决方案,不

  • 各种Oracle索引类型介绍「建议收藏」

    各种Oracle索引类型介绍「建议收藏」逻辑上:Singlecolumn单行索引Concatenated多行索引Unique唯一索引NonUnique非唯一索引Function-based函数索引Domain域索引物理上:Partitioned分区索引NonPartitioned非分区索引B-tree:Normal正常型B树ReverKey反转型B树Bitmap位图索引索引结构:B-tree:

  • laravel构造函数和中间件执行顺序问题

    laravel构造函数和中间件执行顺序问题

    2021年10月22日
  • C++ this指针

    C++ this指针this指针引言:首先,我们都知道类的成员函数可以访问类的数据(限定符只是限定于类外的一些操作,类内的一切对于成员函数来说都是透明的),那么成员函数如何知道哪个对象的数据成员要被操作呢,原因在于每个对象都拥有一个指针:this指针,通过this指针来访问自己的地址。注意:this指针并不是对象的一部分,this指针所占的内存大小是不会反应在sizeof操作符上的。this指针的类型取决于…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号