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

开发过程中，总要用到上传照片这一功能，在前台可以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" onchange="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('image.*'))
{
alert("您选择的文件不是图片"); continue;
}
var reader = new FileReader();
reader.onload = (function (file)
{ return function (e)
{ $("#ReadCardPic")[0].src = this.result;
$("#WorkerImg").val(this.result.split(',')[1]);
};
})(e.target.files[0]); reader.readAsDataURL(e.target.files[0]); } }