当前位置: 首页 > news >正文

健忘者系列-MVC图片上传(一)

最近总结了各种MVC图片上传的方法,现在做个记录,我们一步一步来,从简单的开始。

第一编我们不用插件,不用异步,不传多个,直接提交表单上传图片。

首先介绍一下 HTML <form> 标签的 enctype 属性

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。

我们要在ui那里将enctype = "multipart/form-data"

下面是客户端的代码

<form action="/Demo/UploadImage" method="post" enctype="multipart/form-data">
    <input type="file" name="Image">
    <input type="submit" value="上传">
</form>

备注:这里要注意的是fileinput要写上name属性,后台参数列表的名字是对应name的。

服务器接收客户端提交上来的图片我们可以用 HttpPostedFileBase接收,也可以用 Request.Files接收。

下面是HttpPostedFileBase的方式

        [HttpPost]
        public ActionResult UploadImage(HttpPostedFileBase image)
        {
            if (image != null && image.ContentLength > 0)
            {
                //存储的时候我们可以使用下面的方法拿到我们想要的东西
                //Path.GetFileName(image.FileName);//拿到文件名和扩展名 head.jpg
                //Path.GetFileNameWithoutExtension(image.FileName);//拿到文件名 head
                //Path.GetExtension(image.FileName);//拿到扩展名 .jpg 
                string filePath = Path.Combine(Server.MapPath("~/UploadPic"), image.FileName);
                image.SaveAs(filePath);
            }
            return RedirectToAction("Index");
        }

下面是Request.Files的方式

        [HttpPost]
        public ActionResult UploadImage()
        {
            if (Request.Files.Count > 0 && Request.Files[0] != null)
            {
                HttpPostedFileBase file = Request.Files[0];
                string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);
                file.SaveAs(filePath);
            }
            return RedirectToAction("Index"); 
        }

结果图片就会上传到项目的UploadPic目录了,例子比较简单,以后我们会对图片进行处理,截图缩略图改名字等。

接着我们上传多个文件

我们还是不用插件,不用异步,直接提交表单上传多个文件。

下面是客户端的代码

    <form action="/Demo/UploadImage" method="post" enctype="multipart/form-data">
        <input type="file" name="images">
        <input type="file" name="images">
        <input type="file" name="images">
        <input type="submit" value="上传">
    </form>
备注:这里要注意的就是把 name 都改成相同的。

下面是服务器端的代码

第一种方式

        [HttpPost]
        public ActionResult UploadImage(IEnumerable<HttpPostedFileBase> images)
        {
            if (images != null && images.Any())
            {
                foreach (HttpPostedFileBase file in images)
                {
                    if (file.ContentLength == 0) continue;
                    string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);
                    file.SaveAs(filePath);
                }
            }
            return RedirectToAction("Index");
        }
第二种方式

        [HttpPost]
        public ActionResult UploadImage()
        {  
            if (Request.Files != null && Request.Files.Count > 0)
            {
                for (int i = 0; i < Request.Files.Count; i++)
                {
                    HttpPostedFileBase file = Request.Files[i];
                    if (file.ContentLength == 0) continue;
                    string filePath = Path.Combine(Server.MapPath("~/UploadPic"), file.FileName);
                    file.SaveAs(filePath); 
                }
            } 
            return RedirectToAction("Index");
        }

注意:后台的时候我测试了一下,就算不选择文件直接提交表单,imagesFiles都不会为空的,只是file的ContentLength==0,所以在保存文件之前先做个判断就好了。






相关文章:

  • 健忘者系列-MVC图片上传(二)
  • mybatis-plus 代码生成器使用
  • java.lang.ClassCastException: java.util.LinkedHashMap cannot be cast to ***
  • you *might* want to use the less safe log_bin_trust_function_creators variable
  • node.js websocket.io 搭建 websocket 通信服务
  • Mysql 定时器
  • mysql 存储过程 遍历
  • mysql复制表结构的几种方式
  • TO_CHAR 和 TO_DATE的一些用法
  • Spark:学习笔记
  • linux:常用基本命令
  • Spark:数据倾斜处理一般从什么地方入手
  • MapReduce:中map和reduce的数量设置问题
  • MapReduce: 计数器(Counter)
  • Hive:HiveQL中如何排查数据倾斜问题
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • Android 控件背景颜色处理
  • CSS魔法堂:Absolute Positioning就这个样
  • css选择器
  • Docker 笔记(2):Dockerfile
  • flask接收请求并推入栈
  • Invalidate和postInvalidate的区别
  • JWT究竟是什么呢?
  • Laravel Telescope:优雅的应用调试工具
  • sessionStorage和localStorage
  • ⭐ Unity 开发bug —— 打包后shader失效或者bug (我这里用Shader做两张图片的合并发现了问题)
  • 测试开发系类之接口自动化测试
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 免费小说阅读小程序
  • 什么是Javascript函数节流?
  • 提醒我喝水chrome插件开发指南
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 项目实战-Api的解决方案
  • 一文看透浏览器架构
  • 中文输入法与React文本输入框的问题与解决方案
  • 正则表达式-基础知识Review
  • ​决定德拉瓦州地区版图的关键历史事件
  • !$boo在php中什么意思,php前戏
  • #162 (Div. 2)
  • #if和#ifdef区别
  • $GOPATH/go.mod exists but should not goland
  • (007)XHTML文档之标题——h1~h6
  • (2022版)一套教程搞定k8s安装到实战 | RBAC
  • (二)丶RabbitMQ的六大核心
  • (译) 函数式 JS #1:简介
  • (转) ns2/nam与nam实现相关的文件
  • .NET 8.0 发布到 IIS
  • .Net MVC + EF搭建学生管理系统
  • .net on S60 ---- Net60 1.1发布 支持VS2008以及新的特性
  • .net6+aspose.words导出word并转pdf
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .NET框架类在ASP.NET中的使用(2) ——QA
  • .php结尾的域名,【php】php正则截取url中域名后的内容
  • :not(:first-child)和:not(:last-child)的用法
  • ??javascript里的变量问题