這一節(jié)我們來(lái)講講在MVC中如何進(jìn)行文件的上傳，我們逐步深入，一起來(lái)看看。
Upload File（一）
我們?cè)谀J(rèn)創(chuàng)建的項(xiàng)目中的Home控制器下添加如下：
public ActionResult UploadFile()
{
return View();
}
[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file)
{
var fileName = file.FileName;
var filePath = Server.MapPath(string.Format("~/{0}", "File"));
file.SaveAs(Path.Combine(filePath, fileName));
return View();
}
在 UploadFile 視圖中添加上如下：
form action="/Home/UploadFile" method="post" enctype="multipart/form-data">
input type="file" name="file" />br />
input type="submit" value="提交" />
/form>
有關(guān)視圖中我們就不必多說(shuō)，只需明白如下兩點(diǎn)：
（1）在后臺(tái)利用HttpPostedFileBase來(lái)接收上傳文件，該類(lèi)為一個(gè)抽象類(lèi)，但在ASP.NET Web Form卻沒(méi)有此類(lèi)，此類(lèi)的出現(xiàn)是為了更好的進(jìn)行單元測(cè)試。
（2）在視圖中文件類(lèi)型的name要和后臺(tái)接收文件的參數(shù)一致。
接下來(lái)我們進(jìn)行演示看看結(jié)果：
上述我們簡(jiǎn)單的上傳了一個(gè)Excel文件，下面我們通過(guò)強(qiáng)類(lèi)型視圖以及模型驗(yàn)證來(lái)強(qiáng)化上傳。
Upload File（二）
我們創(chuàng)建如下BlogModel類(lèi)：
public class BlogModel
{
[Display(Name = "博客名稱")]
[Required(ErrorMessage = "請(qǐng)輸入你的博客名稱！")]
public string BlogName { get; set; }
[Display(Name = "博客地址")]
[Required(ErrorMessage = "請(qǐng)輸入你的博客地址！")]
public string BlogAddress { get; set; }
[Display(Name = "博客圖片")]
[Required(ErrorMessage = "請(qǐng)上傳你的博客圖片！")]
[ValidateFile]
public HttpPostedFileBase BlogPhoto { get; set; }
}
上述未有驗(yàn)證文件的特性，只能自定義文件特性，如下：
public class ValidateFileAttribute : ValidationAttribute
{
public override bool IsValid(object value)
{
int MaxContentLength = 1024 * 1024 * 4;
string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".pdf" };
var file = value as HttpPostedFileBase;
if (file == null)
return false;
else if (!AllowedFileExtensions.Contains(file.FileName.Substring(file.FileName.LastIndexOf('.'))))
{
ErrorMessage = "請(qǐng)上傳你的博客圖片類(lèi)型: " + string.Join(", ", AllowedFileExtensions);
return false;
}
else if (file.ContentLength > MaxContentLength)
{
ErrorMessage = "上傳圖片過(guò)大，不能超過(guò)4兆 : " + (MaxContentLength / 1024).ToString() + "MB";
return false;
}
else
return true;
}
}
我們可以任意設(shè)置上傳的文件大小，我們?cè)O(shè)置為40兆，在配置文件中我們知道 maxRequestLength = 4096 默認(rèn)是4兆，當(dāng)然我們可以改變其默認(rèn)設(shè)置。
httpRuntime targetFramework="4.5" executionTimeout="1100" maxRequestLength="40960" />
此時(shí)我們接著在控制器中修改上述上傳的方法：
[HttpPost]
public ActionResult UploadFile(BlogModel bModel)
{
if (ModelState.IsValid)
{
var fileName = bModel.BlogPhoto.FileName;
var filePath = Server.MapPath(string.Format("~/{0}", "File"));
bModel.BlogPhoto.SaveAs(Path.Combine(filePath, fileName));
ModelState.Clear();
}
return View();
}
我們接下來(lái)看看效果：
咋回事，出狀況了看來(lái)是我們的文件過(guò)大的原因，看了下該文件有接近45兆，而我們卻設(shè)置的是40兆，于是乎繼續(xù)在配置文件中去修改文件大小，但是結(jié)果還是一樣。我們繼續(xù)仔細(xì)看看該結(jié)果的提示，根據(jù)提示去找到配置文件下的節(jié)點(diǎn)再試試，我們?cè)?syste.webServer 節(jié)點(diǎn)下設(shè)置為2G：
security>
requestFiltering>
requestLimits maxAllowedContentLength="2147483647">
/requestLimits>
/requestFiltering>
/security>
結(jié)果就好使了，查了查也有遇到類(lèi)似問(wèn)題的人，貌似只有給個(gè)結(jié)果，卻沒(méi)有給解釋?zhuān)瑸槭裁丛?httpRuntime 中設(shè)置不行，但是有些這樣設(shè)置是正確的，這是什么原因？最終找到了答案：
（1）在IIS 5和IIS 6中，默認(rèn)文件上傳的最大為4兆，當(dāng)上傳的文件大小超過(guò)4兆時(shí)，則會(huì)得到錯(cuò)誤信息，但是我們通過(guò)如下來(lái)設(shè)置文件大小。
system.web>
httpRuntime maxRequestLength="2147483647" executionTimeout="100000" />
/system.web>
（2）在IIS 7中，默認(rèn)文件上傳的最大為28.6兆，當(dāng)超過(guò)其默認(rèn)設(shè)置大小，同樣會(huì)得到錯(cuò)誤信息，但是我們卻可以通過(guò)如下來(lái)設(shè)置文件上傳大小。
system.webServer>
security>
requestFiltering>
requestLimits maxAllowedContentLength="2147483647" />
/requestFiltering>
/security>
/system.webServer>
【類(lèi)推的話，個(gè)人覺(jué)得可能是在IIS 7+以上都是通過(guò)如上述IIS 7來(lái)設(shè)置文件上傳大小】
雖然我們?cè)诜?wù)器端對(duì)其進(jìn)行驗(yàn)證，但是我們覺(jué)得這樣還是不能保險(xiǎn)，我們繼續(xù)在客戶端對(duì)其上傳的圖片類(lèi)型和大小進(jìn)行驗(yàn)證。
（1）利用強(qiáng)類(lèi)型視圖給出視圖代碼：
style type="text/css">
.field-validation-error {
color: red;
}
/style>
form id="uploadFileSub" action="/Home/UploadFile" method="post" enctype="multipart/form-data">
fieldset>
legend>/legend>
ul class="lifile">
li>
@Html.LabelFor(m => m.BlogName)br />
@Html.TextBoxFor(m => m.BlogName, new { maxlength = 50 })
@Html.ValidationMessageFor(m => m.BlogName)
/li>
li>
@Html.LabelFor(m => m.BlogAddress)br />
@Html.TextBoxFor(m => m.BlogAddress, new { maxlength = 200 })
@Html.ValidationMessageFor(m => m.BlogAddress)br />
/li>
li>
@Html.LabelFor(m => m.BlogPhoto)
@Html.TextBoxFor(m => m.BlogPhoto, new { type = "file" })
@Html.ValidationMessageFor(m => m.BlogPhoto)
span id="warning" style="color:red;font-size:large;">/span>
/li>
li>
input type="submit" value="提交" />
/li>
/ul>
/fieldset>
/form>
（2）利用腳本獲取上傳文件大小：
function GetFileSize(fileid) {
var fileSize = 0;
fileSize = $("#" + fileid)[0].files[0].size;
fileSize = fileSize / 1048576;
return fileSize;
}
（3）根據(jù)上傳的路徑獲取文件名稱：
function getNameFromPath(strFilepath) {
var objRE = new RegExp(/([^\/\\]+)$/);
var strName = objRE.exec(strFilepath);
if (strName == null) {
return null;
}
else {
return strName[0];
}
}
（4）當(dāng)更換文件時(shí)觸發(fā)Change事件對(duì)其文件類(lèi)型和文件大小進(jìn)行驗(yàn)證：
$("#BlogPhoto").change(function () {
var file = getNameFromPath($(this).val());
if (file != null) {
var errors = $(document).find(".field-validation-error");
$.each(errors, function (k, v) {
if ($(v).attr("data-valmsg-for") === "BlogPhoto") {
$(v).hide();
}
});
var extension = file.substr((file.lastIndexOf('.') + 1));
switch (extension) {
case 'jpg':
case 'png':
case 'gif':
case 'pdf':
fileTypeBool = false;
break;
default:
fileTypeBool = true;
}
}
if (fileTypeBool) {
$("#warning").html("只能上傳擴(kuò)展名為jpg,png,gif,pdf的文件！");
return false;
}
else {
var size = GetFileSize('BlogPhoto');
if (size > 4) {
fileSizeBool = true;
$("#warning").html("上傳文件已經(jīng)超過(guò)4兆！");
} else {
fileSizeBool = false;
}
}
});
（5）當(dāng)點(diǎn)擊提交按鈕時(shí)對(duì)其進(jìn)行文件進(jìn)行驗(yàn)證：
$("#uploadFileSub").submit(function () {
$("input[type='text']").each(function (k, v) {
if ($(v).length) {
$(v).siblings("span").hide();
}
});
if (fileTypeBool || fileSizeBool) {
return false;
}
});
【注意】上述對(duì)于驗(yàn)證不是太完整，但是基本的架子已經(jīng)給出。
接下來(lái)我們來(lái)完整的演示整個(gè)過(guò)程。
上述我們一直是利用的純HTML代碼，當(dāng)然也可以利用MVC的擴(kuò)展方法來(lái)進(jìn)行，如下（最終渲染的還是表單，本質(zhì)上是一致的，就不做過(guò)多探討了）
@using (Html.BeginForm("UploadFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
input type="file" id="file" name="file" />
input type="submit" value="提交" />
}
結(jié)語(yǔ)
這一節(jié)我們比較詳細(xì)的講述了在MVC中如何進(jìn)行文件的上傳，但是我們還有一點(diǎn)未曾講到，則是利用流來(lái)將如我們上述的圖片轉(zhuǎn)換成字節(jié)來(lái)插入到數(shù)據(jù)庫(kù)中。
有關(guān)上傳可以參考這篇文章.NET對(duì)此利用流來(lái)上傳。
作者和原文連接：Recluse_Xpy http://www.cnblogs.com/CreateMyself/p/5414200.html
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:- ASP.NET MVC HttpPostedFileBase文件上傳的實(shí)例代碼
- ASP.NET MVC4 利用uploadify.js多文件上傳
- asp.net core mvc實(shí)現(xiàn)文件上傳實(shí)例
- asp.net mvc 實(shí)現(xiàn)文件上傳帶進(jìn)度條的思路與方法
- 解決ASP.NET Core Mvc文件上傳限制問(wèn)題實(shí)例
- ASP.NET MVC文件上傳教程(二）
- ASP.NET MVC5實(shí)現(xiàn)文件上傳與地址變化處理（5）
- ASP.NET MVC處理文件上傳的小例子
- 用Fine Uploader+ASP.NET MVC實(shí)現(xiàn)ajax文件上傳[代碼示例]
- ASP.NET MVC實(shí)現(xiàn)批量文件上傳
