ASP.NET MVC从数据库读取、存入图片
生活随笔
收集整理的這篇文章主要介紹了
ASP.NET MVC从数据库读取、存入图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、DEMO效果
先選擇圖片，點擊上傳后，即可在照片預覽中看到照片。如果需要更改，重新上傳就可覆蓋原圖片。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
二、代碼
頁面端，這里有個細節：再次上傳后，如果<img>的URL不變，瀏覽器會從緩存中讀取圖片，這就會導致圖片預覽不會刷新，不顯示剛上傳的圖片。解決這個問題只需要 傳一個隨機字符串作為參數即可。
@{Layout = "~/Views/Shared/_LayoutPage1.cshtml"; }<!DOCTYPE html><html> <head><meta name="viewport" content="width=device-width" /><title>圖片編輯</title><link href="~/Scripts/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /><link href="~/Scripts/toastr/build/toastr.min.css" rel="stylesheet" /><script src="~/Scripts/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script><script src="~/Scripts/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script><script src="~/Scripts/this/customEditor_fieldTypes.js"></script><script src="~/Scripts/this/tools.js"></script><script src="~/Scripts/toastr/build/toastr.min.js"></script> </head> <body><div class="row"><div class="col-md-12"><ul class="nav nav-tabs" id="myTab" style="margin-top:20px"><li class="active"><a href="#tab_1" data-toggle="tab" class="btn" id="tabone">圖片信息</a></li></ul><div class="tab-pane fade active in" id="tab_1"><div class="form-group col-md-6">@using (Ajax.BeginForm("", null, new AjaxOptions() { OnSuccess = "PostSuc", OnFailure = "PostFail", HttpMethod = "Post" }, new { enctype = "multipart/form-data", id = "FormImg" })){<input type="hidden" name="EmployeeId" id="EmployeeId"><span class="btn btn-default fileinput-button"><input type="file" name="file1" id="file1"></span><button class="btn btn-primary start" type="button" id="btnpictureid"><span><i class="fa fa-file"></i> 上傳</span></button><fieldset><legend>照片預覽</legend><img id="headimg" src="@Url.Action("ShowImage","Basic",new { @ViewBag.EmployeeId})" /></fieldset>}</div></div></div></div> </body> </html> <script type="text/javascript">var EmployeeId = @ViewBag.EmployeeId;$(document).ready(function () {$("#EmployeeId").val(EmployeeId);$("#btnpictureid").bind("click", function () { SaveImg(); });})function SaveImg() {$("#FormImg").attr("data-ajax-success", "OnSaveImgSuccess(data)");$("#FormImg").attr("data-ajax-failure", "OnSaveImgFail()");$("#FormImg").attr("action", "/Basic/UploadImg");$("#FormImg").submit();}function OnSaveImgSuccess(data) {if (data.result == "success") {toastr.success("上傳成功");$("#headimg").attr({ "src": "/Basic/ShowImage?EmployeeId=" + @ViewBag.EmployeeId +"&Random=" + (Math.random()*100)+1});//解決因為URL沒變導致圖片不刷新的問題}else {toastr.error(data.msg);}}function OnSaveImgFail(msg) {toastr.error("圖片上傳失敗,請重試!");} </script>三、控制器端代碼?
///顯示圖片 public ActionResult ShowImage(long EmployeeId,int Random = 999 ) {byte[] byData = _IEmployeeInfo.GetEmployeeById(EmployeeId).Image;return File(byData, @"image/jpeg"); }///上傳圖片 public ActionResult UploadImg(long EmployeeId) {string msg = string.Empty;string result = string.Empty;byte[] imgData = null;int flag = 0;if (Request.Files.Count > 0){HttpPostedFileBase file = Request.Files["file1"];if (file.ContentLength < 100 * 1024){string fileType = System.IO.Path.GetExtension(file.FileName);//獲取文件類型if (fileType != null){fileType = fileType.ToLower();//將文件類型轉化成小寫if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileType)){imgData = new byte[file.ContentLength];//新建一個長度等于圖片大小的二進制地址file.InputStream.Read(imgData, 0, file.ContentLength);//將image讀取到ImageData中flag = _IEmployeeInfo.UpdateImg(EmployeeId, imgData);if (flag > 0){result = Tips.success;}}else{msg = "只支持圖片格式";result = Tips.fail;}}}else{msg = "圖片大小不能超過100KB";result = Tips.fail;}}else{msg = "上傳圖片不能為空";result = Tips.fail;}return Json(new Res { result = result, msg = msg }); }?
總結
以上是生活随笔為你收集整理的ASP.NET MVC从数据库读取、存入图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 单链表反转和插入
- 下一篇： 跌倒识别 摔倒识别 -lightweig