王建斌 赵靓
(肇庆学院,广东 肇庆 526061)
(肇庆医学高等专科学校,广东 肇庆 526020)
摘 要 介绍了Web上传文件的三种客户端解决方案:HTML表单、RIA以及插件,它们都可以很好地实现文件上传任务,当然这还需要服务端代码的配合,其中RIA选择了Flex,插件选择了ActiveX作为代表来介绍。此外,重点在于构建和分析HTTP协议数据来提供大文件上传的实时上传进度显示。
关键词 Web;HTTP;Flex;ActiveX;文件上传
1 引言
如果是对于几KB至几MB字节的文件上传,确实没有必要写一篇文章去讨论,但是如果需要上传大文件,例如教师向网络学习系统上传软件、视频等几百MB甚至上GB大小的文件时,平常所用的方法要么失效,要么不能实时反映上传进度。
文中采用的方法对于小文件和大文件上传一视同仁,并且对可能采用的三种解决方案进行展示和总结。那么,可能采用的三种解决方案如下:
(1) HTML Form(可含Javascript、Ajax)。
(2) RIA技术(Flex、Silverlight、JavaFX等)。
(3) 插件技术(Acticx、Applet等)。
图1 Web服务存储上传文件的方式
浏览器/服务器(B/S)模式,其实是一种特殊形式的C/S,浏览器作为客户端,HTTP作为通信协议。面对简单的文件上传情况,客户端代码只需HTML表单,服务器编写简单的动态页面和处理代码。而对于复杂的大文件带进度显示的上传,则一般要深入了解HTTP 1.1协议[1]以及各类技术如何处理HTTP请求。文中所讲如图2所示的三种解决方案,主要指的是浏览器端的代码,而服务端不限制使用何种动态页面技术或代码模块。
图2 浏览器文件上传的三种解决方案
2 解决方案一:HTML表单
建立一个名称为“FileUploadForm.html”的html页面,里面包含一个表单,表单的提交方式为post,enctype为“multipart/form-data”,action为服务器端处理页面。此外,form里面还要包含一个文件框,type应为file,示意代码如下:
<form action="FileUploadForm.aspx" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input type="file" name="fileField" id="fileField" /> … 省略部分代码 </form>
FileUploadForm.aspx 并不难实现,ASP.NET 2.0提供了服务器组件<asp:FileUpload>来协助完成文件上传的任务,并在visual studio中提供可视化的操作极大简化代码的编写工作,并且一次可以同时上传多个文件[2]。
在上传按钮的事件处理方法中,加入下面几行代码,就可以完成文件上传,可以说非常的简单。
protected void uploadButton_Click(object sender,EventArgs e)
{
if (FileUpload1.HasFile)
{
string fileName = Path.GetFileName(FileUpload1. FileName);
FileUpload1.PostedFile.SaveAs(Request.Physical ApplicationPath + fileName);
Label1.Text = FileUpload1.FileName + "上传完成";
}
}
由于IIS默认允许上传最大长度为4M的文件,所以如果要上传更大的文件,则需要修改w
eb应用程序的f配置文件[3]。如下修改可以允许最大2G的HTTP请求数据(经作者测试,600多M文件可以成功上传)。
<system.web>
<httpRuntime executionTimeout="600" maxRequestLength ="2147483647"/>
</system.web>
上传大文件的时候,需要较久的时间,最好可以动态显示上传的进度,可是<asp:FileUpload>组件并不会把接收到的数据立即写入规定文件,也没有提供有关进度的事件。所以,<asp:FileUpload>组件处理大文件上传显然不合适了,在第四部分我们解决这个问题。
图3是上传进度显示页面,仅实时显示了目前上传文件的数据量。这是基于一个简单的机制:服务器接收到浏览器提交的HTTP数据后,就把筛选后的数据写入文件。那么,可以隔一段时间去访问该文件的大小信息,就可以知道上传了多少数据。
图3 上传进度显示页面
没有显示上传文件的大小,是因为,客户端的Javascript出于安全原因,不能获取文件信息。而服务端只能获得发送的HTTP正文数据的总长度,而不能直接获取文件的大小,这一点可以得到证实[4](当然,在某些条件下可以通过特殊的方法计算出来)。
3 解决方案二:RIA技术
RIA技术的倡导者Adobe,提供了Flex技术来使程序员可以用编程的方式生成Flash内容,所以我们使用Flex来开发第二种方案的客户端程序。其他的RIA技术如Silverlight、JavaFX等也相当有竞争力,不过就运行库而言,Flex是最轻量级的。上传大文件还不是太复杂的问题,所以Flex已经可以解决的很好。Silverlight的实现可以参考文献5[5]。
Flex提供FileReference类来方便文件上传,表1是类中最重要的属性、方法和事件[6]。
表1大文件发送 FileReference类的属
有了upload方法,上传进度和上传完成事件,可以很容易地实现大文件上传和进度显示任务。Flash上传的文件大小是没有限制的,经测试,可以上传600多MB的文件。不过要注意的是,如果该文件需要在Flash播放器中播放,则最大限制为100MB,所以在上传视频文件且需要在浏览中播放时要注意这个问题。
图4 Flex的文件上传
4 解决方案三:插件技术
在浏览器中使用插件,也可以作为文件上传的一种解决方案,尽管很可能会因为客户浏览器的安全设置,插件无法运行,但是在学校内网、企业内网等环境还是可以考虑使用的。
我们使用VB6开发一个ActiveX控件,可以在IE浏览器中使用。在VB6中创建一ActiveX控件工程“fileupload”,其中关键部件使用了Winsock控件,用于建立控件与Web服务之间的通信,并且读取文件数据,通过Socket连接把数据以HTTP POST方式发送给服务器[7]。主要工作如下:
(1) 建立连接(服务器地址、端口)。
(2) 构建HTTP的头部信息,发送给服务器,并打开文件,以准备发送文件数据。
(3) 在Winsock的SendProgress事件处理方法中,从文件读取数据到一固定大小缓冲区,然后发送给服务器,此过程重复至文件数据全部读取完成。
(4) 接收到服务器发回的“HTTP/1.1 200 OK”,表示文件上传成功。
编写好的控件需要VB打包和部署工具打包好,然后放在Web服务器上,供客户浏览器下载安装,会跳出安全警告提示,以确定是否要安装“fileupload.CAB”,还会提示安装VB运行环境。
图5在浏览器中运行文件上传ActiveX控件的情况,可以清楚显示上传的进度。
图5 ActiveX的文件上传
5 服务端代码
前面讲的是文件上传在客户端需要做的工作。这部分介绍服务端需要做的工作。Web服务器的选择相比而言很自由,因为客户不关心用什么服务器。这里主要介绍采用IIS + ASP.NET + C#的组合方式(当然,Tomcat + Servlet + FileUpload也可以实现大文件上传和进度显示,但这里就不介绍了)。
编写一个HTTP Module类来处理HTTP请求数据,该类实现IHttpModule接口,并在BeginRequest事件发生时处理,处理流程的实现在BeginRequestHandler方法中[8]。
public class FileUploadFormModule:IHttpModule
{
public void Init(HttpApplication app)
{
app.BeginRequest += new EventHandler(BeginRequest Handler);
}
void BeginRequestHandler(object sender,EventArgs e)
{
// 分析和处理HTTP请求数据
}
}
分析和处理HTTP请求数据的主要工作如下:
(1) 分析http数据的头部信息,可以得到请求的方法(POST)、url地址、内容长度 (Content-Length)、内容类型(Content-Type,boundary)等信息;由于HTTP Module对所有请求都生效,所以在BeginRequestHandler方法中加入下面代码,使得Module只对 ”FileUploadForm.aspx”的POST请求生效。
if (app.Request.HttpMethod != "POST" || app.Request.Url.Local Path != "/FileUploadForm.aspx")
发布评论