MVC文件上传与下载

MVC文件上传与下载

MVC文件上传与下载

想想自己从毕业到工作也有一年多，以前公司的任务的比较重，项目中有的时候需要用到什么东西都去搜索一下，基础知识感觉还没有以前在学校中的好。最近开始写博客，真的是有一种心中虽有千言，下笔实无一字的感概，本人不擅长理论，不擅长说教，不懂框架，现在写博客是即兴而言，均是自己的工作和个人学习中的感悟而写，本来以为写个文件上传下载两个小时之类博客神马的都全部搞定，实际耗费的时候三倍左右，不多说了，正题开始:

1.上传文件File的Model建立

FileName 文件名称   FileContent上传的文件以二进制的形式保存    FileExtName 文件后缀名   FilePath文件不保存在数据库时，存放一个相对路径

 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>

文件上传之后保存在网站目录:

 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);

文件名辅助方法:

 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.

(吐槽一两句，博客园有的博友好坑爹，我搜索的时候一不小心进去看到一个博友使用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" />

总结：一个小小的文件上传下载搞了这么久，还是感觉平时基础的东西自己多注意练习还是有必要的，免得手生.文件上传其实水挺深的，大文件上传，断点上传，多文件同时上传，吾生也有涯，学也无涯，希望下周有时间能再写点.

 

 

 

 

标签:  MVC,  文件上传