C#.Net MVC 前台页面Js调用FileReader实现图片预览

最新推荐文章于 2022-09-24 16:31:19 发布

似董非懂

最新推荐文章于 2022-09-24 16:31:19 发布

阅读量1.6k

点赞数

分类专栏： JS，FileReader，MVC

本文链接：https://blog.csdn.net/han1455418171/article/details/70213478

版权

本文介绍了在C# .Net MVC项目中，如何使用前端JavaScript的FileReader API来实现在上传图片前的预览功能。通过将图片转换为base64编码，可以方便地在页面上展示图片，并最终将该编码存储到数据库中。

摘要由CSDN通过智能技术生成

开发过程中，总要用到上传照片这一功能，在前台可以Js调用FileReader实现图片预览，转成base64存入数据库

HTML部分：

引用Model

@model Models.WorkerInfo

获取 System.Web.Mvc.HtmlHelper 的HiddenFor对象，隐藏WorkerInfo中的WorkerImg字段

@Html.HiddenFor(model => model.WorkerImg)<td>照片</td>
<td> 
<div> 
<img id="ReadCardPic" src="" style="width:102px;height:126px;" />
 </div> 
<div id="Div_SynCardOcx"> 
<input type="file" id="upImage" name="upImage" οnchange="imgChange(event)"/> 
</div>
</td>function imgChange(e) { 
var images = e.target.files;
for (var i = 0, img; img = images[i]; i++) 
{ 
if (!img.type.match('imag