欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Asp.net实现MVC处理文件的上传下载功能实例教程

程序员文章站 2024-02-21 18:29:40
上传于下载功能是程序设计中非常常见的一个功能,在asp.net程序开发中有着非常广泛的应用。本文就以实例形式来实现这一功能。 一、概述 如果你仅仅只有asp.net w...

上传于下载功能是程序设计中非常常见的一个功能,在asp.net程序开发中有着非常广泛的应用。本文就以实例形式来实现这一功能。

一、概述

如果你仅仅只有asp.net web forms背景转而学习asp.net mvc的,我想你的第一个经历或许是那些曾经让你的编程变得愉悦无比的服务端控件都驾鹤西去了.fileupload就是其中一个,而这个控件的缺席给我们带来一些小问题。这篇文章主要说如何在asp.net mvc中上传文件,然后如何再从服务器中把上传过的文件下载下来.

二、实现方法

1.文件上传

在web forms中,当你把一个fileupload控件拖到设计器中,你或许没有注意到在生成的html中会在form标签中加入一条额外属性enctype="multipart/form-data". 而fileupload控件本身会生成为<input type=”file” />,在mvc的view里,有许多种方法可以做到同样效果,第一种的html如下:

<form action="/" method="post" enctype="multipart/form-data"> 
 <input type="file" name="fileupload1" /><br /> 
 <input type="submit" name="submit" id="submit" value="upload" /> 
</form> 

注意form标签已经包括了enctype标签,而method属性则设为”post”,这样设置并不多于因为默认的提交时通过http get方式进行的。下面这种方式,使用html.beginform()扩展方法,会生成和上面同样的html:

<% 
 using (html.beginform("", "home", formmethod.post, new {enctype="multipart/form-data"}))  
  {%>  
   <input type="file" name="fileupload1" /><br /> 
   <input type="submit" name="submit" id="submit" value="upload" /> 
<% }%> 

注意<input type=”file”>标签的name属性,我们在后面再讨论
ok,现在我们可以浏览本地文件然后通过upload提交按钮将文件提交到服务器端,下一步就是在服务器端处理上传的文件,在使用fileupload控件时,你可以很轻松的通过fileupload的hasfile方法来查看文件是否被上传。但是在asp.net mvc中貌似就不是这么方便了,你会和原始的http更接近一些,然而,一个扩展方法可以处理这些:

public static bool hasfile(this httppostedfilebase file) 
{ 
 return (file != null && file.contentlength > 0) ? true : false; 
}

当你看到对应的controller类的代码时,你会发现request对象作为httprequestbase类型的一个属性存在。httpreuqestbase其实是http请求的一个封装,暴漏了很多属性,包括files collection(其实是httpfilecollectionbase的集合),在集合中的每一个元素都是httppostedfilebase的集合,扩展方法是用于确保上传的文件是否存在。实际上,这和fileupload.hasfile()方法的工作原理一致。

在controller action中使用起来其实很容易:

public class homecontroller : controller 
{ 
 public actionresult index() 
 { 
  foreach (string upload in request.files) 
  { 
   if (!request.files[upload].hasfile()) continue; 
   string path = appdomain.currentdomain.basedirectory + "uploads/"; 
   string filename = path.getfilename(request.files[upload].filename); 
   request.files[upload].saveas(path.combine(path, filename)); 
  } 
  return view(); 
 } 
}

2.多文件上传

或许你已经比我更早的想到如何更好的将request.files作为一个集合使用。这意味着它不仅仅只能容纳一个文件,而能容纳多个,我们将上面的view改为如下:

<% 
 using (html.beginform("", "home", formmethod.post, new {enctype="multipart/form-data"}))  
  {%>  
   <input type="file" name="fileupload1" /><br /> 
   <input type="file" name="fileupload2" /><br /> 
   <input type="file" name="fileupload3" /><br /> 
   <input type="file" name="fileupload4" /><br /> 
   <input type="file" name="fileupload5" /><br /> 
   <input type="submit" name="submit" id="submit" value="upload" /> 
<% }%>  

在controller的代码中已经检查了是否所有的文件上传框中都有文件,所以即使对于多文件上传,我们也不再需要修改controller的代码,注意每一个<input type=”file”>都有不同的name属性,如果你需要调用其中一个,比如说,你需要引用第三个输入框只需要使用:request.files["fileupload3"].

3.存入数据库

在你冲我狂吼”关注点分离”之前,我想声明下面的代码仅仅用于作为说明功能.我将ado.net的代码放入controller action中,但我们都知道,这并不好。数据访问的代码应该放在model中某个部分的数据访问层中.但是,下面这段代码仅仅可以给大家怎样将上传的文件存入数据库中一个更直观的印象,首先,我们需要创建一个数据表(filetest)并创建一个表:filestore

create table [dbo].[filestore]( 
[id] [int] identity(1,1) not null, 
[filecontent] [image] not null, 
[mimetype] [nvarchar](50) not null, 
[filename] [nvarchar](50) not null 
) on [primary] textimage_on [primary] 

filecontent域是image数据类型,用于存储以二进制数据形成的文件,而index action改为:

public actionresult index() 
{ 
 foreach (string upload in request.files) 
 { 
  if (!request.files[upload].hasfile()) continue; 
  string mimetype = request.files[upload].contenttype; 
  stream filestream = request.files[upload].inputstream; 
  string filename = path.getfilename(request.files[upload].filename); 
  int filelength = request.files[upload].contentlength; 
  byte[] filedata = new byte[filelength]; 
  filestream.read(filedata, 0, filelength); 
  const string connect = @"server=.\sqlexpress;database=filetest;trusted_connection=true;"; 
  using (var conn = new sqlconnection(connect)) 
  { 
   var qry = "insert into filestore (filecontent, mimetype, filename) values (@filecontent, @mimetype, @filename)"; 
   var cmd = new sqlcommand(qry, conn); 
   cmd.parameters.addwithvalue("@filecontent", filedata); 
   cmd.parameters.addwithvalue("@mimetype", mimetype); 
   cmd.parameters.addwithvalue("@filename", filename); 
   conn.open(); 
   cmd.executenonquery(); 
  } 
 } 
 return view(); 
}

修改后的代码会以循环的方式遍历web页面中所有的上传文件,并检查<input type=”file”>中是否已经加入文件,然后,从文件中提取出3个信息:文件名,mime类型(文件的类型),http request中的二进制流。二进制数据被转换为byte数组,并以image数据类型存入数据库。mime类型和文件名对于用户从数据库中提取文件来说非常重要。

4.将数据库中的文件返回给用户:

你如何将文件传送给用户取决于你最开始如何存储它,如果你将文件存入数据库,你会用流的方式将文件返还给用户,如果你将文件存在硬盘中,你只需要提供一个超链接即可,或者也可以以流的方式。每当你需要以流的方式将文件送到浏览器中,你都的使用到file()方法的重载(而不是使用我们先前一直使用的view()方法),对于file()方法有3类返回类型:filepathresult,filecontentresult和filestreamresult,第一种类型用于直接从磁盘返回文件;第二种类型用于将byte数组返回客户端;而第三种方式将已经生成并打开的流对象的内容返回客户端。

如果你还记得的话,我们将上传的文件存入了数据库,并以byte数组的形式存入filecontent域内.而当需要提取时,它仍然会以一个byte数组进行提取,这意味着我们使用返回filecontentresult的file()重载,如果我们想让提取的文件名更有意义,我们使用接受3个参数的重载,三个参数是:byte数组,mime类型,文件名:

public filecontentresult getfile(int id) 
{ 
 sqldatareader rdr; byte[] filecontent = null;  
 string mimetype = "";string filename = ""; 
 const string connect = @"server=.\sqlexpress;database=filetest;trusted_connection=true;"; 
 using (var conn = new sqlconnection(connect)) 
 { 
  var qry = "select filecontent, mimetype, filename from filestore where id = @id"; 
  var cmd = new sqlcommand(qry, conn); 
  cmd.parameters.addwithvalue("@id", id); 
  conn.open(); 
  rdr = cmd.executereader(); 
  if (rdr.hasrows) 
  { 
   rdr.read(); 
   filecontent = (byte[])rdr["filecontent"]; 
   mimetype = rdr["mimetype"].tostring(); 
   filename = rdr["filename"].tostring(); 
  } 
 } 
 return file(filecontent, mimetype, filename); 
}  

在view中最简单的使用来使用这个action只需提供一个超链接:

<a href="/getfile/1">click to get file</a> 

如果在数据库中存储的图片是图片类型,和使用超链接不同的是,我们通过指向controller action的一个带有src属性的<image>标签来获取:

<img src="/getfile/1" alt="my image" /> 

下面再让我们来看看使用filepathresult(用于从硬盘提取文件)是多简单的事:

public filepathresult getfilefromdisk() 
{ 
 string path = appdomain.currentdomain.basedirectory + "uploads/"; 
 string filename = "test.txt"; 
 return file(path + filename, "text/plain", "test.txt"); 
}  

而这也可以用过超链接提取:

<a href="/getfilefromdisk">click to get file</a> 

而最后一个选择filestreamresult也可以从磁盘中提取文件:

public filestreamresult streamfilefromdisk() 
{ 
 string path = appdomain.currentdomain.basedirectory + "uploads/"; 
 string filename = "test.txt"; 
 return file(new filestream(path + filename, filemode.open), "text/plain", filename); 
}  

三、补充

filepathresult和filestreamresult的区别是什么?我们又该如何取舍呢?主要的区别是filepathresult使用httpresponse.transmitfile来将文件写入http输出流。这个方法并不会在服务器内存中进行缓冲,所以这对于发送大文件是一个不错的选择。他们的区别很像datareader和dataset的区别。于此同时, transmitfile还有一个bug,这可能导致文件传到客户端一半就停了,甚至无法传送。而filestreamresult在这方面就很棒了。比如说:返回asp.net chart 控件在内存中生成的图表图片,而这并不需要将图片存到磁盘中.