C#.Net MVC 前臺頁面Js呼叫FileReader實現圖片預覽
阿新 • • 發佈:2019-02-04
開發過程中,總要用到上傳照片這一功能,在前臺可以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]); } }