在日常的上傳試題中我們常常會涉及到圖片的上傳,那么如何把圖片上傳到頁面中呢?
下圖是圖片上傳成功的樣子,下面我們就來分析一下怎樣寫代碼能實現這個效果

我們在控制器中創建一個方法,并給它一個參數file來接收頁面傳過來的數據
注:因為頁面傳過來的數據是文件,所以參數的類型必須是文件類型
public ActionResult UpEeditorFile(HttpPostedFileBase file) {
ReturnJson msg = new ReturnJson();實例化實體類ReturnJson,這里面有我們需要的字段
msg.State = false;記錄返回值的狀態
我們使用try catch來捕捉一下錯誤,防止這段代碼出錯導致后面的代碼不能運行
try
{
第一步:我們首先要判斷頁面傳輸過來的數據不能為空,否則就提示用戶“上傳的文件為空”
if (file!=null)
{
第二步:獲取文件類型 設置文件名稱 檢查文件目錄是否存在
創建一個字符串類型的變量來獲取文件類型
string fileExtension = Path.GetExtension(file.FileName);
通過當前時間創建文件名稱可以保證文件名永遠不會重復
string fileName = DateTime.Now.ToString(“yyyy-MM-dd”)
//表示全局唯一標識符 (GUID)
+ Guid.NewGuid()+ fileExtension;
檢查目錄是否存在,不存在就在項目中創建
if (!Directory.Exists(Server.MapPath("~/Document/Title/Temp/")))
{//創建目錄/Document/ Title /Directory.CreateDirectory(Server.MapPath("~/Document/Title/Temp/"));
}
if (!Directory.Exists(Server.MapPath("~/Document/Title/Images/")))
{//創建目錄/Document/ Title /Directory.CreateDirectory(Server.MapPath("~/Document/Title/Images/"));
}
最后通過代碼實現的效果
1 第三步:創建保存上傳過來文件的路徑
2 string filePath = Server.MapPath("~/Document/Title/Temp/")+fileName;
若擴展名不為空則判斷文件是否是指定圖片類型 ,然后返回img,否則提示“只支持上傳圖片文件”
if (fileExtension!=null)
{
fileExtension = fileExtension.ToLower();//轉小寫字母
if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))
Contains()返回一個值,該值指示指定的子串是否出現在此字符串中,參數 value 要搜尋的字符串
{
將文件保存到指定路徑
file.SaveAs(filePath);
創建保存img標簽的字符串
string str = “<img “AutoResizeImage(150,150,this)” “+ “src=”/Document/Title/Temp/”+fileName+”"/>";
注:AutoResizeImage()是一個方法是用來設置傳輸過來圖片的寬度和高度以免圖片過大影響頁面樣式,此標簽里保存的是最后的經過處理的圖片,此處的“\”為轉義
msg.State = true; 此時返回值為true
msg.Text = str;返回一個文本,也就是img標簽
}
else
{
msg.Text = “只支持上傳圖片文件(gif,jpg,bmp,jpeg,png)”;
}
}
}
else
{
msg.Text = “上傳的文件為空!”;
}
}
catch (Exception)
{
msg.Text = “上傳數據異常!”;
}
return Json(msg, JsonRequestBehavior.AllowGet);
}
//1.7圖片壓縮
function AutoResizeImage(maxWidth, maxHeight, objImg) {
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth == 0 && maxHeight == 0) {
Ratio = 1;
} else if (maxWidth == 0) {//
if (hRatio < 1) Ratio = hRatio;
} else if (maxHeight == 0) {
if (wRatio < 1) Ratio = wRatio;
} else if (wRatio < 1 || hRatio < 1) {
Ratio = (wRatio <= hRatio ? wRatio : hRatio);
}
if (Ratio < 1) {
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點, 并不代表本站贊同其觀點和對其真實性負責,本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺,網站上部分文章為轉載,并不用于任何商業目的,我們已經盡可能的對作者和來源進行了通告,但是能力有限或疏忽,造成漏登,請及時聯系我們,我們將根據著作權人的要求,立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。