当前位置:首页 >> IT/计算机 >>

Web上传大文件的三种解决方案


Web 上传文件的三种解决方案
王建斌 赵靓 (肇庆学院,广东 肇庆 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 服务存储上传文件的方式

文件上传到服务器,一般可以存放于本地文件系统、数据库和远程 FTP 等。图 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 id="form1"> <input type="file" name="fileField" id="fileField" /> … 省略部分代码 </form> FileUploadForm.aspx 并不难实现,ASP.NET 2.0 提供了服务器组件<asp:FileUpload>来协助完成文件上传 的任务, 并在 visual studio 中提供可视化的操作极大简化代码的编写工作, 并且一次可以同时上传多个文件
[2]

action="FileUploadForm.aspx"

method="post"

enctype="multipart/form-data"

name="form1"

。 在上传按钮的事件处理方法中,加入下面几行代码,就可以完成文件上传,可以说非常的简单。 protected void uploadButton_Click(object sender,EventArgs e) { if (FileUpload1.HasFile) { string fileName = Path.GetFileName(FileUpload1. FileName) ; FileUpload1.PostedFile.SaveAs(Request.Physical ApplicationPath + Label1.Text = FileUpload1.FileName + "上传完成"; } } 由于 IIS 默认允许上传最大长度为 4M 的文件,所以如果要上传更大的文件,则需要修改 web 应用程序 fileName) ;

的 web.conf 配置文件[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") return; (2) 根据情况剥掉其他表单数据,保存文件数据。如果含有 filename 字段,则可以提取上传的文件名。 如果正文数据即为上传文件内容,则无需分析直接保存即可,因为 ActiveX 控件可以在 HTTP 头部信息后 直接附上文件数据,而不像浏览器提交表单那样还附加了表单字段数据。 有了 HTTP Module, 还需要在 web.conf 中配置, 第一个 Module 可以供前两种解决方案使用, 而第二个 Module 可以供第三种解决方案使用。 <httpModules> <add name="FileUploadFormModule" type= "WebFile Upload. <add name="FileUploadActiveXModule" type="Web </httpModules> FileUploadFormModule"/>

FileUpload.FileUploadActiveXModule"/>

6

结束语

文中的三种解决方案,孰优孰劣,不是本文所讨论的重点。因为每种技术都有它存在的理由,多一些选 择,也就多一些把握。你可以为你的系统(教学系统、内容管理系统等)选择合适的一种方案或多种方案。

参考文献

[1] Chris Shiflett. HTTP Developer's Handbook [ M ]. Indiana(USA) :Sams Publishing,2003 [2] Microsoft MSDN. FileUpload Class[ EB/OL ]. http :

//msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.fileupload.aspx [3] Microsoft MSDN. httpRuntime Element ( ASP.NET Settings Schema ) //msdn.microsoft.com/ en-us/library/e1f13641.aspx [4] 白鹤,吕红亮,王劲林. 进度显示的大文件上传组件的设计与实现[ J ]. 计算机工程与应用. 2009,45 (5) :91- 94 [5] 程国雄,胡世清. 基于 Silverlight 大文件上传的两种实现方案[ J ]. 微计算机应用. 2009,30(6) :48 - 52 [6] Adobe. flash.net FileReference Class Reference [ EB/OL ]. http : //help.adobe.com/en_US/FlashPlatform/reference/ [ EB/OL ]. http :

actionscript/3/flash/net/FileReference.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2 [7] Chandru Prashanth. HTTP File Upload without User Interaction using .NET[ EB/OL ]. 2004-10-26. http: //www.aspfree.com/c/a/.NET/HTTP-File-Upload-without-User-Interaction-using-dot-NET/ [8] stg609. Asp.Net 上 传 大 文 件 专 题 ( 3 ) -- 从 请 求 流 中 获 取 数 据 并 保 存 为 文 件 [ 上 ] [ EB/OL ].

2008-08-03.http://www.cnblogs.com/stg609/archive/2008/08/03/1258898.html 收稿日期: 修改日期: 收稿日期:12 月 29 日 修改日期:1 月 30 日 基金项目:肇庆市科技创新计划项目( 基金项目:肇庆市科技创新计划项目(2010E371) ) 作者简介: ,男,江西吉安人,硕士,讲师,软件/网络工程师,研究方向为计算机软件。 作者简介:王建斌(1980-)


赞助商链接
相关文章:
webservice 大文件上传
webservice 大文件上传_计算机软件及应用_IT/计算机_专业资料。一、服务端 /** * 分批上传小文件 * filename 文件名称 */ public void uploadImage(String file...
基于Web的文件上传管理系统
《电脑知识与技术》2014 年第 24 期 摘要:该文开发了一套基于 Web 方式的文件上传系统,此系统的基本设计理念是简单高 效,主要为了解决大量文件向一个地方集中的...
如何利用Websphere MQ实现大文件交换
交换应用架构 在利用 Websphere MQ 实现大文件传输的应用系统中,存在以下几种...多线程并发分快传输 调用用户自定义处理程序 网络中断纠错机制 客户端应用进程...
关于eWebEditor上传文件 超过200K时提示文件无效的解决...
关于eWebEditor上传文件 超过200K时提示文件无效的解决方案_计算机硬件及网络_IT/...“服务”选项里关闭 iis admin service 服务 (三)找到 windows ?system32?...
Web Uploader文件上传插件使用详解_javascript技巧
采用大文件分片并发上传,极大的提高了文件上传效 ...使用 Web Uploader 文件上传需要引入三种资源:JS, ...resize: false }); 由于 webuploader 不处理 UI ...
通用文件上传浏览方案 (自动保存的)
通用文件上传浏览方案 (自动保存的) - 通用文件上传浏览方案 1. 总体方案 通过厂家名称参数标识,集成各厂家的视频控件在 web 页面统一显示;文件上传采用 http 或 ...
C#实现Web文件上传的两种方法
C#实现 Web 文件的上传Web 编程中,我们常需要把一些本地文件上传Web 服务器上,上传后,用 户可以通过浏览器方便地浏览这些文件,应用十分广泛。 那么使用...
web应用中文件的存放方式
web应用中文件的存放方式 - web 应用中文件的存放方式解决方案 解决方案 A: 将附件保存到数据库服务器上,用户访问任何一台 Web 服务器都是通过连接到数据库, ...
eWebEditor 解决上传100K的限制及在上传文件时提示请选...
eWebEditor 解决上传 100K 的限制及在上传文件时提示请选择一个有效的文件的 的限制及在上传文件时提示请选择一个有效的文件的... 在 eWebEditor 下找到 Upload...
完整的接口解决方案说明书
家实施单位的信息交互与业务协作; 本技术解决方案就是针对实现工程建设部与...Web Service 采用 XML 数据格式传输信息。所以,无论是发送数据还是返回结果,...
更多相关文章: