ASP.NET MVC 上传图片到项目目录中的文件夹并显示
生活随笔
收集整理的這篇文章主要介紹了
ASP.NET MVC 上传图片到项目目录中的文件夹并显示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
因項目需求，需要一個上傳圖片并顯示的功能，類似于上傳頭像并顯示出來。查閱了網上資料，寫了個Demo，希望能幫助到更多的人。此Demo基于ASP.NET MVC實現。
?選擇圖片：
點擊按鈕進行上傳：?
一、先在項目中新建一個文件夾用于存放圖片?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
二、View頁面代碼?
@{Layout = null; }<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="~/Scripts/jquery-3.3.1.min.js"></script><script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> </head> <body>@using (Ajax.BeginForm("", null, new AjaxOptions() { OnSuccess = "PostSuc", OnFailure = "PostFail", HttpMethod = "Post" }, new { enctype = "multipart/form-data", id = "FormBaseData" })){<input type="hidden" name="MouldId" id="MouldId" value="9527" /><input type="file" name="file1" /><input type="button" value="submit" id="btnSubmit" /><img src="" width="300" height="300" display:inline; alt="圖片預覽" id="mypicture" />} </body> </html><script type="text/javascript">$(document).ready(function () {$("#btnSubmit").bind("click", function () { Query(); });})function Query() {$("#FormBaseData").attr("data-ajax-success", "OnQuerySuccess(data)");$("#FormBaseData").attr("data-ajax-failure", "OnQueryFail()");$("#FormBaseData").attr("action", "/home/UploadImg");$("#FormBaseData").submit();}function OnQuerySuccess(data) {$("#mypicture").attr({ "src": data });}function OnQueryFail() {alert("發生錯誤!");} </script>三、Controller端代碼?
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;namespace WebApplication1.Controllers {public class HomeController : Controller{public ActionResult Index(){return View();}[HttpPost]public ActionResult UploadImg(long MouldId){string msg = string.Empty;if (Request.Files.Count > 0){HttpPostedFileBase file = Request.Files["file1"];if (file.ContentLength < 5 * 1024 * 1024){string fileType = System.IO.Path.GetExtension(file.FileName);//獲取文件類型if (!System.IO.Directory.Exists(Server.MapPath("~/Pictures/"))){System.IO.Directory.CreateDirectory(Server.MapPath("~/Pictures/"));}string filePath = Server.MapPath("~/Pictures/");//保存文件的路徑if (fileType != null){fileType = fileType.ToLower();//將文件類型轉化成小寫if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileType)){file.SaveAs(filePath + file.FileName);string str = "Pictures/" + file.FileName;msg = str;}else{msg = "只支持圖片格式";}}}else{msg= "圖片大小不能超過5M";}}else{msg = "上傳圖片不能為空";}return Content(msg);}} }參考：https://blog.csdn.net/weixin_44540201/article/details/89630530
總結
以上是生活随笔為你收集整理的ASP.NET MVC 上传图片到项目目录中的文件夹并显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 调整 Windows系统参数网址
- 下一篇： asp.net ajax控件工具集 Au