今天给大家分享采用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实现文件上传功能相关推荐

  1. 前后端分离跨服务器文件上传,SpringBoot+Vue.js实现前后端分离的文件上传功能

    这篇文章需要一定vue和springboot的知识,分为两个项目,一个是前端vue项目,一个是后端springboot项目. 后端项目搭建 我使用的是springboot1.5.10+jdk8+ide ...

  2. java前后端分离的实现方式_采用前后端分离的方式进行开发，实现了几种常用的文件上传功能...

    MyUploader-Backend 单文件上传,多文件上传,大文件上传,断点续传,文件秒传,图片上传 简介 采用前后端分离的方式进行开发,实现了几种常用的文件上传功能. 前端采用 vue.js + ...

  3. ie6多文件上传_一个好的“文件上传”功能必须要注意的这些点你都知道吗？

    检查上传文件扩展名白名单,不属于白名单内,不允许上传:[前端和后端都要做好校验] 上传文件的目录必须是http请求无法直接访问到的.如果需要访问的,必须上传到其他(和web服务器不同的)域名下,并设置 ...

  4. Android 实现文件上传功能(upload)

    文 件上传在B/S应用中是一种十分常见的功能,那么在Android平台下是否可以实现像B/S那样的文件上传功能呢?答案是肯定的.下面是一个模拟网站程 序上传文件的例子.这里只写出了Android部分的 ...

  5. Spring 文件上传功能

    本篇文章,我们要来做一个Spring的文件上传功能: 1. 创建一个Maven的web工程,然后配置pom.xml文件,增加依赖: 1 2 3 4 5 <dependency>     & ...

  6. jQuery插件AjaxFileUpload文件上传实现Javascript多文件上传功能

     Ajax file upload plugin是一个功能强大的文件上传jQuery插件,可自定义链接.或其它元素庖代传统的file表单上传结果,可实现Ajax动态提示文件上传 过程,同时支撑多文 ...

  7. Node.js 博客实例（三）添加文件上传功能

    原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章 上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库 使用 For ...

  8. php利用ajax文件上传,如何在PHP中利用AjaxForm实现一个文件上传功能

    如何在PHP中利用AjaxForm实现一个文件上传功能 发布时间:2020-12-18 14:52:38 来源:亿速云 阅读:94 作者:Leah 如何在PHP中利用AjaxForm实现一个文件上传功 ...

  9. jquery.form.js java_使用jQuery.form.js/springmvc框架实现文件上传功能

    使用的技术有jquery.form.js框架, 以及springmvc框架.主要实现异步文件上传的同时封装对象,以及一些注意事项. 功能本身是很简单的,但是涉及到一些传递参数类型的问题.例如:jque ...

最新文章

  1. 青龙面板-傻妞sillyGirl xdd机器人频繁掉线解决方法
  2. linux 瘦客户机系统,2X ThinClientOS基于Linux的瘦客户端系统 | MOS86
  3. 可能会用到的弹出框用法
  4. 微信公众号消息推送-模板消息发送
  5. 图解Nosql（hbase）与传统数据库的区别
  6. KVM 安装windows 虚拟机
  7. ant target间的dependency
  8. java 错误输入异常_在Java中进行输入验证期间用错误通知替换异常
  9. python s d是什意思_python里d是什么意思
  10. 深度学习（1）---2017年深度学习NLP重大进展与趋势
  11. 《移山之道-VSTS软件开发指南》---读书笔记
  12. svn diff和vimdiff的使用
  13. 药品名自动归类机器人（化药_中成药_中药材）
  14. java怎么运行安卓程序_在安卓手机上怎么运行java的应用程序
  15. android中数据库sql语句删除指定日期或之前之后的数据
  16. android 列表倒计时,Android ListView列表实现倒计时
  17. IOS – OpenGL ES 调节图像白平衡/色温 GPUImageWhiteBalanceFilter
  18. virtualBox 虚拟机安装Windows7系统
  19. Flink部署 完整使用 (第三章)
  20. eigen库安装_四足机器人优化方法：Webots下Eigen与qpOASES非线性优化库环境搭建

热门文章

  1. cartographer学习笔记--如何保存cartagrapher_ros建好的地图
  2. 关于level_idc和Profile_IDC的解释
  3. highgui基础 OpenCV trackbar
  4. 【深度学习mmdetection错误】——mmdetection 运行报错KeyError:‘ConvWS is already registered in conv layer‘
  5. 【TensorFlow】——broadcast_to(在不复制内存的情况下自动扩张tensor)
  6. idea写java spark程序,Spark : 在IDEA中用scala编写Spark的WordCount程序并提交运行
  7. RC电路输出波形的时域与频域分析
  8. boost解析xml文件
  9. linux系统数据库类型,linux下的数据类型
  10. 离散数学反对称关系_《离散数学》学习记录 - 集合论