ASP.Net Core -- 文件上传

   2023-02-08 学习力0
核心提示:在做项目时候,一些表单要求有图片上传功能,今天总结一下在ASP.Net Core中如何实现图片上传功能。实现功能:点击按钮或者文件选择框,选择图片,在input框内显示图片名称,点击保存,将图片上传到images文件夹,同时对图片名称重命名保存到数据库。新建一个S

在做项目时候,一些表单要求有图片上传功能,今天总结一下在ASP.Net Core中如何实现图片上传功能。

实现功能:点击按钮或者文件选择框,选择图片,在input框内显示图片名称,点击保存,将图片上传到images文件夹,同时对图片名称重命名保存到数据库。

新建一个Student.cs:

public class Student
    {
        public int Id { get; set; }
        
        public string FirstName { get; set; }
        
        public string LastName { get; set; }
        
        public DateTime BirthDate { get; set; }
       
        public Gender Gender { get; set; }

        public string PhotoPath { get; set; }
    }

然后新建一个StudentCreateViewModel.cs

public class StudentCreateViewModel
    {
        [Display(Name = "姓"),Required]
        public string FirstName { get; set; }
        [Display(Name = "名"),Required,MaxLength(10)]
        public string LastName { get; set; }
        [Display(Name = "出生日期"), Required]
        public DateTime BirthDate { get; set; }
        [Display(Name = "性别")]
        public Gender Gender { get; set; }
        [Display(Name ="图片")]
        public IFormFile Photo { get; set; }
    }

这里边和Student.cs的字段一样,只不过Student.cs类文件的属性不够用,所以新建一个ViewModel

里边图片的类型是:IFormFile,为什么要用这个类型?现在对IFormFile进行反编译,如下:

public interface IFormFile
    {
        //
        // 摘要:
        //     Gets the raw Content-Type header of the uploaded file.
        string ContentType
        {
            get;
        }
        //
        // 摘要:
        //     Gets the raw Content-Disposition header of the uploaded file.
        string ContentDisposition
        {
            get;
        }
        //
        // 摘要:
        //     Gets the header dictionary of the uploaded file.
        IHeaderDictionary Headers
        {
            get;
        }
        //
        // 摘要:
        //     Gets the file length in bytes.
        long Length
        {
            get;
        }
        //
        // 摘要:
        //     Gets the form field name from the Content-Disposition header.
        string Name
        {
            get;
        }
        //
        // 摘要:
        //     Gets the file name from the Content-Disposition header.
        string FileName
        {
            get;
        }

        //
        // 摘要:
        //     Opens the request stream for reading the uploaded file.
        Stream OpenReadStream();
        //
        // 摘要:
        //     Copies the contents of the uploaded file to the target stream.
        //
        // 参数:
        //   target:
        //     The stream to copy the file contents to.
        void CopyTo(Stream target);
        //
        // 摘要:
        //     Asynchronously copies the contents of the uploaded file to the target stream.
        //
        // 参数:
        //   target:
        //     The stream to copy the file contents to.
        //
        //   cancellationToken:
        Task CopyToAsync(Stream target, CancellationToken cancellationToken = default(CancellationToken));
    }

可以看到,里边有很多重要的内容,其实它就是一个类型文件,比如可以读取文件,获取文件名称,类型,还可以将上传文件的内容复制到目标流等等...

然后新建视图,编写表单:

<form method="post" enctype="multipart/form-data">
    <div style="width:800px;margin:0 auto">
        <div class="form-group">
            <label asp-for="FirstName"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName"></span>
        </div>
        <div>
            <label asp-for="LastName"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName"></span>
        </div>
        <div>
            <label asp-for="BirthDate"></label>
            <input asp-for="BirthDate" type="date" class="form-control" />
            <span asp-validation-for="BirthDate"></span>
        </div>
        <div>
            <label asp-for="Gender"></label>
            <select asp-for="Gender" asp-items="Html.GetEnumSelectList<Gender>()" class="form-control">
            </select>
            <span asp-validation-for="Gender"></span>
        </div>
        <div>
            <label asp-for="Photo"></label>
            <div class="custom-file">
                <input asp-for="Photo" class="form-control custom-file-input" />
                <label class="custom-file-label">请选择照片....</label>
            </div>
        </div>
        <br />
        <input type="submit" value="save" class="btn btn-primary" />
    </div>
</form>

编写js代码,当选择图片后,获取路径,将图片名称显示在标签中,如下:

<script>
      $(document).ready(function () {
          $('.custom-file-input').on('change', function () {
              var fileName = $(this).val().split('\\').pop();
              $(this).next('.custom-file-label').html(fileName);
          })
      })
</script>

控制器中接收表单内容,判断是否有图片上传,如果有,获取图片名称,对名称重命名编码,保存并保存到文件:

首先要使用到HostingEnvironment这个服务对象,因为它可以获取项目中的 绝对路径和相对路径,然后注入:

public readonly IRepository<Student> _repository;
        private readonly HostingEnvironment _hostingEnvironment;

        public HomeController(IRepository<Student> repository,HostingEnvironment hostingEnvironment)
        {
            _repository = repository;
            _hostingEnvironment = hostingEnvironment;
        }

然后实现:

public IActionResult Create(StudentCreateViewModel model)
        {
            if (ModelState.IsValid)
            {
                string uniqueFileName = null;

                if (model.Photo != null)
                {
                    //找到根目录下的wwwroot文件夹下的images文件夹
                    string uploadesFolder = Path.Combine(_hostingEnvironment.WebRootPath, "images");

                    //对图片名称进行重命名,防止重复
                    uniqueFileName = Guid.NewGuid().ToString() + "-" + model.Photo.FileName;

                    //将路径和新的图片名称合并
                    string filePath = Path.Combine(uploadesFolder, uniqueFileName);

                    //将图片复制到指定文件夹中
                    model.Photo.CopyTo(new FileStream(filePath, FileMode.Create));
                }

                var list = new Student
                {
                    FirstName = model.FirstName,
                    LastName = model.LastName,
                    BirthDate = model.BirthDate,
                    Gender = model.Gender,
                    PhotoPath= uniqueFileName
                };

                var newModel = _repository.Add(list);

                return RedirectToAction(nameof(Detail), new { id = newModel.Id });
            }
            return View();
        }

功能实现!

  

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 使用WebClient自动填写并提交ASP.NET页面表单的源代码
    使用WebClient自动填写并提交ASP.NET页面表单的
    转自:http://www.cnblogs.com/anjou/archive/2007/03/07/667253.html 在.NET中通过程序填写和提交表单还是比较简单。比如,要提交一个如下图所示的登录表单:           填写和提交以上表单的代码如下:       // 要提交表单的URI字符串
    02-09
  • asp.net mvc多条件+分页查询解决方案
    


            
asp.net mvc多条件+分页查询解决方案
    asp.net mvc多条件+分页查询解决方案
    http://www.cnblogs.com/nickppa/p/3232535.html开发环境vs2010css:bootstrapjs:jquery    bootstrap paginator原先只是想做个mvc的分页,但是一般的数据展现都需要检索条件,而且是多个条件,所以就变成了MVC多条件+分页查询因为美工不是很好,所以用的是
    02-09
  • ASP.NET操作Cookies的问题(Bug or Not)
    以下存和取都是在不同的页面中,如果是在同一个页面也没必要用cookies了。 Test1: 给Cookies赋值: const string AAA="aaa"; Response.Cookies[AAA].Value = "111;222;333"; 取值: string value = Request.Cookies[AAA].Value; // value为111 Test2: 给Cooki
    02-09
  • Asp.Net Core 自定义验证属性
      很多时候,在模型上的验证需要自己定义一些特定于我们需求的验证属性。所以这一篇我们就来介绍一下怎么自定义验证属性。  我们来实现一个验证邮箱域名的自定义验证属性,当然,最重要的是需要定义一个继承自ValidationAttribute的类,然后在实现其IsVal
    02-09
  • Asp.Net 之 枚举类型的下拉列表绑定
    有这样一个学科枚举类型:/// 学科 /// /summary public enum Subject {None = 0,[Description("语文")]Chinese = 1,[Description("数学")]Mathematics = 2,[Description("英语")]English = 3,[Description("政治")]Politics = 4,[Description("物理&qu
    02-09
  • [ASP.NET笔记] 1.Web基础知识
         1:http协议:     2:web服务器:     3:静态网页的概念     4:动态网页的概念       http协议:http(hypertext transfer protocol) 即超文本传输协议,这个协议是在internet上进行信息传送的协议任何网页之间要相互沟通,必须要尊循
    02-09
  • ASP.NET邮件发送 .net 发送邮件
      今天做了个ASP.NET做发送邮件功能,发现QQ邮箱好奇怪,当你用QQ邮箱做服务器的时候什么邮件都发送不出去(QQ邮箱除外)。而且爆出这样的错误:"邮箱不可用。 服务器响应为: Error: content rejected.http://mail.qq.com/zh_CN/help/content/rejectedmail.ht
    02-09
  • 由ASP.NET Core根据路径下载文件异常引发的探究
    前言    最近在开发新的项目,使用的是ASP.NET Core6.0版本的框架。由于项目中存在文件下载功能,没有使用类似MinIO或OSS之类的分布式文件系统,而是下载本地文件,也就是根据本地文件路径进行下载。这其中遇到了一个问题,是关于如何提供文件路径的,通
    02-09
  • ASP.NET的运行原理与运行机制 ASP.NET的开发模式包括
    ASP.NET的运行原理与运行机制 ASP.NET的开发模
    在Asp.net4和4.5中,新增了WebPages Framework,编写页面代码使用了新的Razor语法,代码更加的简洁和符合Web标准,编写方式更接近于PHP和以前的Asp,和使用WebForms这种模仿Windows Form编程方式有了很大不同,不再有大量控件和控件生成的大量不够灵活的代码
    02-09
  • ASP.NET 后台接收前台POST过来的json数据方法
     ASP.NET前后台交互之JSON数据 https://www.cnblogs.com/ensleep/p/3319756.html
    02-09
点击排行