MVC文件上傳與下載

時間 2019-11-19

標籤 mvc 文件上傳下載简体版

原文原文鏈接

想一想本身從畢業到工做也有一年多，之前公司的任務的比較重，項目中有的時候須要用到什麼東西都去搜索一下，基礎知識感受尚未之前在學校中的好。最近開始寫博客，真的是有一種心中雖有千言，下筆實無一字的感概，本人不擅長理論，不擅長說教，不懂框架，如今寫博客是即興而言，均是本身的工做和我的學習中的感悟而寫，原本覺得寫個文件上傳下載兩個小時之類博客神馬的都所有搞定，實際耗費的時候三倍左右，很少說了，正題開始:jquery

1.上傳文件File的Model創建

FileName 文件名稱 FileContent上傳的文件以二進制的形式保存 FileExtName 文件後綴名 FilePath文件不保存在數據庫時，存放一個相對路徑ajax

 1  public class File
 2     {
 3       
 4         [Key]
 5         [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
 6         public int ID { get; set; }
 7         public string FileName { get; set; }
 8         public byte[] FileContent { get; set; }
 9         public string FileExtName { get; set; }
10         public DateTime UploadDate { get; set; }
11         public string FilePath { get; set; }
12     }

2.文件上傳及保存的兩種方式

前臺頁面的創建，這裏若是你喜歡使用Razor的話直接使用Html.BeginForm就行.數據庫

<form action="/File/UploadHanlder"  id="myForm" method="post"  enctype = "multipart/form-data">
    <input name="MyUploadile" type="file" />
    <input type="submit" value="提交"/>
</form>

文件上傳以後保存在網站目錄:api

 1     if (Request.Files.Count == 0)
 2             {
 3                 return Content("請從新選擇文件", "text/plain");
 4             }
 5             string path = AppDomain.CurrentDomain.BaseDirectory + "Upload\\";
 6             if (!Directory.Exists(path))
 7             {
 8                 Directory.CreateDirectory(path);
 9             }
10             string fileName = Request.Files[0].FileName;
11             string uploadPath = Path.GetFileName(fileName);
12             Request.Files[0].SaveAs(Path.Combine(path, uploadPath));
13             var file = new MvcFileUpload.Models.File
14             {
15                 FileName = GetFileNameOrSuffix(fileName, true),
16                 FilePath = "/Upload/" + fileName,
17                 FileExtName = GetFileNameOrSuffix(fileName, false),
18                 UploadDate = DateTime.Now
19             };
20             dbConext.Files.Add(file);
21             dbConext.SaveChanges();
22             return Json(new { Flag = "1", Message = "文件上傳成功" }, JsonRequestBehavior.AllowGet);

文件名輔助方法:app

 1 public  string   GetFileNameOrSuffix(string  name,bool  flag)
 2         {
 3            int  index= name.LastIndexOf(".");
 4            string[]  arr=name.Split(new  char[]{'.'},StringSplitOptions.RemoveEmptyEntries);
 5            if(flag)
 6            {
 7                return name.Substring(0, index);
 8              //  return   arr[0];
 9            }
10            else  
11            {
12                return name.Substring(index+1, name.Length-index-1);
13              //  return  arr[1];
14            }
15     
16             
17         }

文件以二進制流的形式保存在數據庫中:框架

 1    if (Request.Files.Count == 0)
 2             {
 3                 //return Json(new { Flag = "0", Message = "文件上傳失敗" }, JsonRequestBehavior.AllowGet);
 4                 return Content("沒有文件", "text/plain");
 5             }
 6             int contentLength = Request.Files[0].ContentLength;
 7             Stream fileStream = Request.Files[0].InputStream;
 8             byte[] fileContent = new byte[contentLength];
 9             fileStream.Read(fileContent, 0, contentLength);
10             string fileName = Request.Files[0].FileName;
11             var file = new MvcFileUpload.Models.File
12             {
13                 FileName = GetFileNameOrSuffix(fileName, true),
14                 FileContent = fileContent,
15                 FileExtName = GetFileNameOrSuffix(fileName, false),
16                 UploadDate = DateTime.Now
17             };
18             dbConext.Files.Add(file);
19             dbConext.SaveChanges();
20             //    return Content("文件上傳成功", "text/plain");
21             return Json(new { Flag = "1", Message = "文件上傳成功" }, JsonRequestBehavior.AllowGet);

好了一個簡單的文件上傳兩種方式都保存方式都搞定了，若是我只寫到這裏的話網上處處都是，你沒興趣往下看，我很差意思寫.各位看官繼續看~異步

3.表單的異步提交和Ajax.BeginForm()

耗費時間最多的地方是在這裏，你本身能夠嘗試一下當你使用Ajax.BeginForm提交表單的時候你明明傳了文件發現結果確爲空，Ajax不支持異步提交文件的方式，若是要實現文件的異步提交須要引用一個Jquery.form.js.post

(吐槽一兩句，博客園有的博友好坑爹，我搜索的時候一不當心進去看到一個博友使用Jaqury.Form.js上面特地給了一個js下載，二話不說的下了以後發現很悲催，使用的時候有些方法一直沒有執行到，懷疑本身的寫錯了，也沒找到哪裏有錯，最後跑到由於官網下載一個最新版的js)學習

Jquery.form.js的官網地址:http://www.malsup.com/jquery/form/,研究英文的你會發現比中文搜索的內容好的多，中文都是各類半瓶水的加工.網站

前臺頁面以下:

 1 @{
 2     ViewBag.Title = "文件上傳";
 3 }
 4 <script src="../../Scripts/jquery-1.7.1.js"></script>
 5 
 6 <script src="../../Scripts/jquery.form.js"></script>
 7 <script>
 8     (function () {
 9         $('#myForm').ajaxForm({
10             target: '#outputdiv',
11             beforeSend: function () {
12                 alert("表單提交前");
13             },
14             target: '#outputdiv',
15             success: function (data) {;
16 
17                     alert(data.Message);
18             }
19            
20         }); 
21 
22     })();
23 </script>
24 <h1>上傳文件</h1>
25 <div id="outputdiv"> </div>
26 <form action="/File/UploadHanlder"  id="myForm" method="post"  enctype = "multipart/form-data">
27     <input name="MyUploadile" type="file" />
28     <input type="submit" value="提交"/>
29 </form>

下載最新的插件，研究官網api的用法和Demo比你看其餘人寫的要快，後臺處理的方法能夠參考上面.

4.圖片，PDF文件預覽和下載（針對的是保存在是網站目錄下的文件）

這個就是調用一下後臺的數據在展現一下:

後臺處理方法:

1 List<Models.File> list=dbConext.Files.Where(item=>item.FilePath!=null).ToList(); 2 return View(list);

前臺頁面展現:

 1 @{
 2     ViewBag.Title = "ShowData";
 3     List<string> typeList = new List<string>() { "png", "jpg", "jpeg" };
 4     List<string> otherList = new List<string>() { "xls", "doc", "docx","zip","rar","pdf"};
 5 }
 6 @model IEnumerable<MvcFileUpload.Models.File>
 7 <h2>圖片</h2>
 8 @foreach (var item in Model)
 9 {
10     if (typeList.Contains(item.FileExtName))
11     {
12         <img  src="@item.FilePath" alt="@item.FileName" height="200px" width="300px"/>
13     }
14 }
15 <h2>其餘文件</h2>
16 @foreach (var item in Model)
17 {
18     if (otherList.Contains(item.FileExtName))
19     {
20     <a href="@item.FilePath" >@(item.FileName+"."+item.FileExtName)</a>
21     }
22 }

5.二進制圖片預覽和文件下載

後臺控制器處理:

  public ActionResult ShowBinaryData()
        {
            var list = dbConext.Files.Where(item =>item.FilePath==null);

            return View(list);
        }
        public FileResult GetFile(int  id)
        {
            Models.File file = dbConext.Files.Where(item => item.ID == id).FirstOrDefault();
            List<string> typeList = new List<string>() { "png", "jpg", "jpeg" };
            List<string> otherList = new List<string>() { "xls", "doc", "docx", "zip","rar","pdf"};
            if (file==null)
            {
                return null;  
            }
            if (typeList.Contains(file.FileExtName))
            {
                return new FileContentResult(file.FileContent, "image/jpg");
            }
            if (otherList.Contains(file.FileExtName))
            {
               return File(file.FileContent, "application/octet-stream",file.FileName+"."+file.FileExtName);
            }
            return null;
        }

 1 @{
 2     ViewBag.Title = "ShowData";
 3     List<string> typeList = new List<string>() { "png", "jpg", "jpeg" };
 4     List<string> otherList = new List<string>() { "xls", "doc", "docx","zip","rar","pdf"};
 5 }
 6 @model IEnumerable<MvcFileUpload.Models.File>
 7 <h2>圖片</h2>
 8 @foreach (var item in Model)
 9 {
10     if (typeList.Contains(item.FileExtName))
11     {
12         <img  src="/File/GetFile?Id=@item.ID" alt="@item.FileName" height="200px" width="300px"/>
13     }
14 }
15 <h2>其餘文件</h2>
16 @foreach (var item in Model)
17 {
18     if (otherList.Contains(item.FileExtName))
19     {
20     <a href="/File/GetFile?Id=@item.ID">@(item.FileName+"."+item.FileExtName)</a>
21     }
22 }

這裏面由於存儲的是二進制數據FileContentResult(file.FileContent, "image/jpg");若是是PDF,Word，xls的話，你須要給出一個下載名，否則下載出來的內容是沒有格式的，File(file.FileContent, "application/octet-stream",file.FileName+"."+file.FileExtName).

若是在上傳的時候有限制的話加個配置<httpRuntime executionTimeout="5400" maxRequestLength="10485760" useFullyQualifiedRedirectUrl="false" />