|
這一節(jié)我們來(lái)講講在MVC中如何進(jìn)行文件的上傳，我們逐步深入，一起來(lái)看看。 using System.IO; ... [HttpPost] public ActionResult Upload(HttpPostedFileBase file) {// file參數(shù)名應(yīng)與頁(yè)面上傳控件的name屬性相同 if (file == null) { return Content("沒(méi)有文件！", "text/plain"); } var fileName = Path.Combine(Request.MapPath("~/Content/import"), Path.GetFileName(file.FileName)); try { file.SaveAs(fileName); Import.ReadExcelToTable(fileName,null);//此處代碼可以刪除，上傳成功后導(dǎo)入excel到數(shù)據(jù)庫(kù) return Content("上傳成功！", "text/plain");//此處為測(cè)試代碼，根據(jù)需要修改 } catch { return Content("上傳異常 ！", "text/plain");//此處為測(cè)試代碼，根據(jù)需要修改 } } Upload File（一） 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 視圖中添加上如下： 有關(guān)視圖中我們就不必多說(shuō)，只需明白如下兩點(diǎn)： （1）在后臺(tái)利用HttpPostedFileBase來(lái)接收上傳文件，該類為一個(gè)抽象類，但在ASP.NET Web Form卻沒(méi)有此類，此類的出現(xiàn)是為了更好的進(jìn)行單元測(cè)試。 （2）在視圖中文件類型的name要和后臺(tái)接收文件的參數(shù)一致。 接下來(lái)我們進(jìn)行演示看看結(jié)果：
上述我們簡(jiǎn)單的上傳了一個(gè)Excel文件，下面我們通過(guò)強(qiáng)類型視圖以及模型驗(yàn)證來(lái)強(qiáng)化上傳。 Upload File（二） 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)上傳你的博客圖片類型: ' + 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è)置。
[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： 結(jié)果就好使了，查了查也有遇到類似問(wèn)題的人，貌似只有給個(gè)結(jié)果，卻沒(méi)有給解釋，為什么在 httpRuntime 中設(shè)置不行，但是有些這樣設(shè)置是正確的，這是什么原因？最終找到了答案： （1）在IIS 5和IIS 6中，默認(rèn)文件上傳的最大為4兆，當(dāng)上傳的文件大小超過(guò)4兆時(shí)，則會(huì)得到錯(cuò)誤信息，但是我們通過(guò)如下來(lái)設(shè)置文件大小。 （2）在IIS 7中，默認(rèn)文件上傳的最大為28.6兆，當(dāng)超過(guò)其默認(rèn)設(shè)置大小，同樣會(huì)得到錯(cuò)誤信息，但是我們卻可以通過(guò)如下來(lái)設(shè)置文件上傳大小。 【類推的話，個(gè)人覺(jué)得可能是在IIS 7+以上都是通過(guò)如上述IIS 7來(lái)設(shè)置文件上傳大小】 雖然我們?cè)诜?wù)器端對(duì)其進(jìn)行驗(yàn)證，但是我們覺(jué)得這樣還是不能保險(xiǎn)，我們繼續(xù)在客戶端對(duì)其上傳的圖片類型和大小進(jìn)行驗(yàn)證。 （1）利用強(qiáng)類型視圖給出視圖代碼： （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ì)其文件類型和文件大小進(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' })){ } 結(jié)語(yǔ) 有關(guān)上傳可以參考這篇文章.NET對(duì)此利用流來(lái)上傳。 作者和原文連接：Recluse_Xpy http://www.cnblogs.com/CreateMyself/p/5414200.html |
|
|
