使用C# MVC进行图片上传-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47472488/article/details/108095292

本文档介绍了如何使用C# MVC实现图片上传功能。首先在数据库中添加图片字段，接着在前端页面设置文件选择控件，利用FileReader读取并验证图片文件，通过POST方式提交到后台。在后台控制器中，考虑到文件大小，将图片保存到硬盘而不是数据库，并检查与创建用户头像目录，最后保存文件并更新数据库记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文献种类：专题技术总结文献；
开发工具与关键技术：MVC与 C#
作者：翁一凯；年级： 1903 ；撰写时间：2020 年月 8 日

                     图片（文件）上传

开发工具与关键技术：VS MVC(Microsoft Visual Studio) C# DW SQL
作者：翁一凯
撰写时间：2020年8月8日

图片（文件）上传
1.在数据库(表-S_User)中添加一个 picture 字段 nvarchar():数据类型
如下图:
在这里插入图片描述

2.前台页面:
①绑定 οndblclick="" :双击事件
文件选择控件隐藏 file:文件类型 accept:筛选文件类型,否则显示所有的文件
accept:筛选文件类型(不是强制),否则显示所有的文件
②FileReader:文件读取器
读取图片文件,用正则表达式过滤文件:
regexImageFilter=/^(?:image/bmp|image/gif|image/jpg|image/jpeg|image/png) $/ i; ③ 文件读取器 o n l o a d 事件在读文件完成后触发, 双击图片触发文件输入框的点击事件, 读取照片 . 再获取文件输入框里面的文件, 判断读取的文件是否是需要的文件类型, 最后使用文件读取器读取文件, 并把文件转为 U R L (B a s e 64 编码) i m a g e R e a d e r . r e a d A s D a t a U R L (f i l e); 因为图片是通过 U R L 传出来显示 (这个 u r l 和常规理解不一样) ④ t y p e : 返回文件的类型 m e t h o d : " p o s t ", 文件上传时只能使用 p o s t 提交，不能使用 g e t 提交 p r o c e s s D a t a : f a l s e, 告诉 j Q u e r y 不要去处理发送的数据 c o n t e n t T y p e : f a l s e, 告诉 j Q u e r y 不要去设置 C o n t e n t - T y p e 请求头 ⑤$

List item

("#userPicture").attr(“src”, “”);//清空图片的预览
$("#frmUser [type=‘reset’]").click();//清空表单

2.后台控制器:
①为什么不放一个二进制类型?
因为图片(文件)占的内存比较大,一般不会直接放到数据库里面去,为了避免数据库体积过度增长,索引速度变慢,所以把文件保存到硬盘上,然后把文件的名称(路径)保存到数据库.
②保存用户头像(图片)
检查存放用户头像的目录是否存在,没有就创建一个(让它自动创建)
③判断是否上传了图片,获取文件的扩展名称,拼接要保存的文件名称,拼接文件保存的路径,保存上传的文件到硬盘.
③上传成功后记得清空表单