当前位置:首页 >> 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-)


相关文章:
Web上传大文件的三种解决方案.doc
Web上传大文件的三种解决方案 - Web 上传文件的三种解决方案 王建斌 赵靓
使用HttpWebRequest实现大文件上传.pdf
关键词:HttpWebRequest、WebClient、OutOfMemoryExceptions 解决方案:开始我在 ...上面是文件基本信息,下面是文件上传自定义控件,我这里实 现的是一个案件上传多...
Web应用安全之八种安全的文件上传方式.doc
Web 应用安全之八种安全的文件上传方式 为了让最终...若文件类型和 这三个指定的文件类型不一致,验证控件...推荐的解决方案 在允许上传文件的网站和 web 应用中...
在网页中实现文件上传方法的分析与研究.pdf
在H兀P中上传文件三种机制:m屺1867,PuT和webnAV。常用的 实现方法是利用在...因此.这种解决方案仅对熟悉FTP且富有经验的用户 来说是可行的。如果我们能把...
基于Web的无组件多文件上传方案的研究与实现.pdf
基于Web的无组件多文件上传方案的研究与实现 - 基于Web的多文件上传是网络应用中存在的一个普遍问题.该文介绍了目前常见的通过浏览器上传文件的方案,并提出了一...
关于eWebEditor上传文件 超过200K时提示文件无效的解决....doc
关于eWebEditor 上传文件 超过 200K 时提示错误的解决方案一问题: eWebEditor 上传图片超过 200K 的时候总是提示"请选择 有效文件",是 2003 的 IIS 搞的鬼,...
Java Web开发中文件上传方法研究与实现.pdf
文件上传Web 开发中经常需要实现的功能, 介绍了 Java Web 开发中主流的文件...给出了三种方法实现文件上传的主要代 码, 并对三者在上传大文件时的效率进行了...
Java Web 开发中文件上传方法研究与实现.doc
给出了三种方法实现文件上传的主要代码,并对三者在上传大文件时的效率 进行了比较。 关键词:SmartUpload;Commons FileUpload;Servlet 3.0;文件上传;Java Web 中图...
.net上传文件大文件及下载方式汇总(转).doc
几种常见的方法,本文主要内容包 括: 1、如何解决...件上传大小限制为 2M,一般情况下,可以采用更改 web...另外还有思归在它的博客堂 中所说的办法 http://...
修改IIS6对于上传文件大小的限制.txt
修改IIS6对于下载文件大小的限制 解决办法:更改IIS的...中允许上传的文件长度最大为4 GB,但是在Web站点级...system32\inetsrv"目录下,用于保存IIS的基本配置信息...
Web Uploader文件上传插件使用详解_javascript技巧.doc
采用大文件分片并发上传,极大的提高了文件上传效 ...使用 Web Uploader 文件上传需要引入三种资源:JS, ...resize: false }); 由于 webuploader 不处理 UI ...
基于WEB的客户端文件上传方法_论文.pdf
基于WEB的客户端文件上传方法 - 在现在的管理信息系统中,比较先进的都已采用浏
基于Web页的文件上传及其管理_论文.pdf
基于Web页的文件上传及其管理 - 本文介绍了在ASP中通过用ADO的STREAM对旬结合FSO来实现文件的上传及管理。
多文件上传在Web应用中的实现方法研究_论文.pdf
文件上传Web应用中的实现方法研究 - 采用HTTP协议实现Web应用中的多文件上传有多种方式。文中针对其中的JavaBean和Struts框架两种方式,分析了从上传文件输入流中...
WEB文件的上传与下载_图文.ppt
WEB文件的上传与下载 - 高级软件人才实作培训专家! 文件的上传与下载 讲师:梁桐 北京传智播客教育 www.itcast.cn 高级软件人才实作培训专家! 文件上传概述 ...
Web信息系统中上传文件的管理_论文.pdf
Web信息系统中上传文件的管理 - 在web信息系统开发中,经常需要上传文件。目前,大多数基于Web的应用系统都采用第三方组件或FSO对象将文件上传到服务器中,但由于上传...
提高Web Service 数据传输效率的基本方法.doc
文章的主要目的在于,提供给读者多种方式的基本 解决方案,使得读者在 Web Service...对应于表 1 数据所传输的 XML 文件示例 <Heading> <column> Name</column> ...
网站的上传下载功能实现.doc
可以设置上传模式,如手动、自动,可以同时上传多个文件,可以设置最大文件数、最...一般处理程序 Down.ashx Web.config 中的配置 <configuration> <system.web> <...
javaweb文件的上传和下载_图文.ppt
javaweb文件的上传和下载_计算机软件及应用_IT/...Commons-fileupload 组件上传的基本原理 ? FileUpload...定后在传送给客户端 方案:利用程序编码实现下载 ? ...
文件传送常用的三种方式FTP.doc
文件传送常用的三种方式 FTP、Email 及“网上邻居”...求另外的传输途径,网络硬盘就是一种很好的解决方式...要知道,这一切以 Http 的方式传输,以 Web 的形式...
更多相关文章: