1. 程式人生 > >C#.Net MVC 前臺頁面Js呼叫FileReader實現圖片預覽

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]); } }