图片及文件上传和下载

狂人隐士 2012-09-16

展开全文

本文简单介绍ASP.NET 2.0中将图片或文件上传到服务器或保存到数据库的方法，以及保存后如何显示和下载。

1．图片及文件保存到服务器

1.1 上传

本示例构造一个能将文件上传到服务器指定目录的页面。

（1）新建一个ASP.NET网站，增加web.config配置文件。

（2）在解决方案资源管理器中，在网站名称上单击鼠标右键，增加一个文件夹，取名为Images，作为上传文件的路径。

（3）进入default.aspx的设计模式，从工具箱的标准选项卡中，拖一个FileUpload控件到页面上，默认ID为“FileUpload1”。该控件负责选中一个文件。

（4）拖一个Button到页面上，Text属性设置为“上传”，ID设置为btnUpload。点击该按钮后，上传文件。

（5）为上传按钮增加Click事件。

（6）在Click事件中，增加以下代码：

protected void btnUpload_Click(object sender, EventArgs e)

{

// 是否选中了文件，如果没有选中，提示并返回

if (FileUpload1.FileName == "")

{

Response.Write("<script language='javascript'>alert('请先选中一个文件再点击上传按钮！');</script>");

return;

}

/* 为防止上传的文件重名，将上传时间追加到文件名之后

* 获取新文件名开始 */

// 取得上传文件名，注意这样得到的是完整路径+文件名

string strFileName = FileUpload1.FileName;

// 得到最后一个“/”的位置

int nIndex = strFileName.LastIndexOf('//');

// 得到真正的文件名

strFileName = strFileName.Substring(nIndex + 1);

// 得到文件后缀前的“.”所在位置

nIndex = strFileName.LastIndexOf('.');

// 将“文件名.后缀”改为“文件名+时间.后缀”（那个加号表示连接）

strFileName = strFileName.Substring(0, nIndex)

+ DateTime.Now.ToString("yyyyMMddHHmmss")

+ strFileName.Substring(nIndex);

/* 获取新文件名结束 */

// 将上传文件的虚拟目录映射为服务器绝对路径

string strPath = Server.MapPath("./Images/" + strFileName);

// 上传文件

FileUpload1.PostedFile.SaveAs(strPath);

}

（7）运行，选中一个文件并上传，看一下是否上传到了Images目录。如果不选中文件直接点上传，看是否有提示。

1.2 文件的使用

上传文件的目的是为了使用它，一般在上传文件过程中，我们把新的文件名记入数据库。在使用时，可以用超级连接<a href=’./Images/新文件名’>显示文本</a>。点击这个超级链接，如果是图片，则会直接打开；如果是文件，则会弹出一个对话框，提示是保存还是直接打开。

如果上传的是图片，要把它嵌入到网页的固定位置，可以使用<img src=’./Images/新文件名’ />标签或使用Image控件。

1.3 优缺点

文件保存到服务器的优点是使用比较简单。缺点是，如果要删除一个文件，必须在Images上创建一个可写的虚拟目录，或者直接将发表的虚拟目录设置为可写的。

将虚拟目录设置为可写的有严重的安全缺陷，因为任何人都可以写这个虚拟目录，无法杜绝别有用心的人写入一个恶意文件。因此一般服务器不允许建立可写虚拟目录，这样删除文件就受到限制。

删除文件可以使用FileInfo类，可以自己写一下删除文件的代码，看一下没有建立可写虚拟目录时删除是否可以，然后创建可写虚拟目录再试一下。

2．图片及文件保存到数据库

此例我们以图片为例，对文件操作也是类似的。

2.1 上传

（1）在DbTemp数据库中，创建一个名为UpFiles的表，用来存放上传的图片，字段如下：

字段名	意义	数据类型	备注
FileID	文件ID	int	设为字段增长、主键
FileName	文件名	Varchar(50)
FileContent	上传文件的内容	Image

（2）添加一个Web窗体，名为Default2.aspx。

（3）进入页面的设计模式，拖入一个FileUpload。

（4）拖入一个Button，Text设为“上传”，ID为“btnUpload”。

（5）拖入一个GridView，用于显示文件名。

（6） GridView的数据源选择“新建数据源”，弹出新建数据源向导。

（7）数据源类型选择为“数据库”，名字为SqlFileSource，确定。

（8）新建一个数据库连接，如果忘记了怎么做，可以参考blog中《ASP.NET2.0入门（1）——访问数据库》那篇文章。

（9）在配制Sql语句界面，选择“指定自定义SQL语句或存储过程”，然后选择“下一步”。

（10） Select语句设置为“SELECT FileID, FileName, FileContent FROM UpFiles ORDER BY FileID”。

（11） Insert语句设置为“INSERT INTO UpFiles(FileName, FileContent) VALUES (@FileName, @FileContent)”。

（12） Delete语句设置为“DELETE FROM UpFiles WHERE (FileID = @original_FileID)”。

（13）完成数据源的创建，并启用删除。

（14）将SqlFileSource的OldValuesParameterFormatString属性设置为“original_{0}”。

（15）点击InsertQuery属性后的按钮，选中参数FileContent，将参数源设置为Control，ControlID设置为FileUpload1，确定。

（16）经过设置后，aspx的body内代码如下：

<body>

<div>

<asp:FileUpload ID="FileUpload1" runat="server" Width="338px" />

<asp:Button ID="btnUpload" runat="server" Text="上传" />

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="FileID"

DataSourceID="SqlFileSource">

<asp:CommandField ShowDeleteButton="True" />

<asp:BoundField DataField="FileID" HeaderText="FileID" InsertVisible="False" ReadOnly="True"

SortExpression="FileID" />

<asp:BoundField DataField="FileName" HeaderText="FileName" SortExpression="FileName" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlFileSource" runat="server" ConnectionString="<%$ ConnectionStrings:DbTempConnectionString %>"

DeleteCommand="DELETE FROM UpFiles WHERE (FileID = @original_FileID)" InsertCommand="INSERT INTO UpFiles(FileName, FileContent) VALUES (@FileName, @FileContent)"

OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT FileID, FileName, FileContent FROM UpFiles ORDER BY FileID">

<asp:Parameter Name="original_FileID" />

</DeleteParameters>

<asp:Parameter Name="FileName" />

<asp:ControlParameter ControlID="FileUpload1" Name="FileContent" PropertyName="FileBytes" />

</InsertParameters>

</asp:SqlDataSource>

</div>

</form>

</body>

（17）为上传按钮增加Click事件：

protected void btnUpload_Click(object sender, EventArgs e)

{

// 是否选中了文件，如果没有选中，提示并返回

if (FileUpload1.FileName == "")

{

Response.Write("<script language='javascript'>alert('请先选中一个文件再点击上传按钮！');</script>");

return;

}

// 取得上传文件名，注意这样得到的是完整路径+文件名

string strFileName = FileUpload1.FileName;

// 得到最后一个“/”的位置

int nIndex = strFileName.LastIndexOf('//');

// 得到真正的文件名

strFileName = strFileName.Substring(nIndex + 1);

// 插入数据

SqlFileSource.InsertParameters["FileName"].DefaultValue = strFileName;

SqlFileSource.Insert();

}

（18）运行程序，选择一个图片上传，可以看到列表中的显示。删除一个图片，可以看到能直接删除。

2.2 图片的显示

图片放到数据库后，显示有一些问题，因为我们没有办法直接用src或ImageUrl之类的属性去请求它。但我们回顾一下blog中《Web绘图（1）——服务器端绘图》那篇文章，就可以找到方法，那就是用一个aspx页面将图片取出并保存，把这个aspx页面转换为图片数据。

现在我们要在那个GridView中显示文件名那一列做个超级链接，点击超级链接显示图片，过程如下：

（1）在解决方案资源管理器的网站名称上单击鼠标右键，选择“添加ASP.NET文件夹”菜单下的“App_Code”，创建一个App_Code文件夹。我们写的不在aspx页面下的代码，以及创建的数据集等都必须放到这个文件夹下（微软有时候为了自己方便也是瞎搞），我们将在这个文件夹下创建一个类型化数据集，用来读取文件内容。

（2）在新建的“App_Code”文件夹上，单击鼠标右键，选择“添加新项”菜单。

（3）弹出的对话框中，选择“数据集”，名字取为“FileSet.xsd”，选择“添加”按钮，这时候弹出“TableAdapter配制向导”。（一个数据集中可以放多个表，添加第二个表时可以从工具箱中拖个TableAdapter过来，剩下的和下面的方法就一样了）。

（4）向导第一步是建立连接字符串，因为我们前面已经建立了一个，就不用新建了，直接选择那个就可以了。

（5）下一步是选择命令类型，我们选择“使用SQL语句”，再下一步。

（6） SQL语句输入“SELECT FileID, FileName, FileContent FROM UpFiles WHERE (FileID = @FileID)”。

（7）一直下一步到完成，这样就建立的一个数据集，而且我们还可以看到里面有个UpFiles表，对应的就是数据库中的表。表下面有个UpFilesTableAdapter，这个适配器中自动生成了从数据库读取数据的Fill代码，以及修改数据库的Update代码等（微软这方面考虑真实周全，所有代码都替我们写好了）。

（8）创建一个名为“ImageShow.aspx”的Web窗体，我们将在这个窗体中读出数据库中的数据，并保存为图片。

（9）在该窗体的Page_Load事件中，输入如下代码：

protected void Page_Load(object sender, EventArgs e)

{

// 创建数据集实例

FileSet fileSet = new FileSet();

// 创建数据适配器实例

FileSetTableAdapters.UpFilesTableAdapter adapter = new FileSetTableAdapters.UpFilesTableAdapter();

// 读取数据，我们从GridView通过QueryString方式传入参数FileID，该参数是数据库中记录的文件ID

adapter.Fill(fileSet.UpFiles, int.Parse(Request["FileID"]));

// 取出二进制文件内容，假设文件一定存在，则第0行的FileContent字段就是我们要取的数据

byte[] by = (byte [])fileSet.UpFiles.Rows[0]["FileContent"];

// 写入输出流

Response.BinaryWrite(by);

}

（10）回到Default2.aspx的设计模式，前面GridView中我们显示的是文件名，下面改成超级链接显示。

（11）选中GridView，点击Columns属性后面的按钮，弹出显示的字段对话框。

（12）将“选定的字段”列表框中的FileName字段删除。

（13）在“可用字段”列表框中选择“HypeLinkField”，加入到“选定的字段”列表框。

（14）选中新增的那个“HypeLinkField”，修改如下属性：

属性名	值	注释
DataNavigateUrlFields	FileID	绑定的Url字段
DataNavigateUrlFormatString	ImageShow.aspx?FileID={0}	Url格式，传递FileID参数到ImageShow.aspx
DataTextField	FileName	显示的字段
HeaderText	文件名称	GridView该列的表头
Target	_blank	点超级链接后弹出一个新窗口显示图片