荆门泽优软件有限公司博客

Web大文件上传控件-JSP开发文档-HttpUploader6.2

版权所有 2009-2017荆门泽优软件有限公司

保留所有权利

官方网站:http://www.ncmem.com/

产品首页:http://www.ncmem.com/webapp/up6.2/index.asp

在线演示:http://www.ncmem.com/products/up6.3/index.htm

产品介绍:http://www.cnblogs.com/xproer/archive/2012/10/26/2741264.html

升级日志:http://www.cnblogs.com/xproer/archive/2012/10/26/2741268.html

开发文档-ASPhttp://www.cnblogs.com/xproer/archive/2012/02/17/2355458.html

开发文档-PHPhttp://www.cnblogs.com/xproer/archive/2012/02/17/2355467.html

开发文档-JSPhttp://www.cnblogs.com/xproer/archive/2012/02/17/2355462.html

开发文档-ASP.NEThttp://www.cnblogs.com/xproer/archive/2012/02/17/2355469.html

资源下载:cab安装包(x86),cab安装包(x64),crx安装包,xpi安装包,exe安装包,开发文档,VC运行库,Discuz!X2插件下载,

示例下载(.NET)SQL2005示例,

示例下载(JSP)Sql2005示例,MySQL示例,Oracle示例,

示例下载(PHP)MySQL示例

联系信箱:1085617561@qq.com

联系QQ1085617561

 

1.  在本地测试DEMO

 

1.1. JSP

 

Oracle

1.创建数据表

f8e6464c-0341-459b-aae6-c2d907ce43b1

 

2.修改数据库连接信息

11555d9d-35f7-491c-847c-085e89cc1f11

 

3.修改上传地址

97ccc6a1-193a-47a1-b1e5-c11cb0225bd5

 

MySQL

JSP示例-MyEclipse

1.创建数据表

effcd642-9ef6-4e15-a8e4-d17b8f87547a

 

2.修改数据库连接

74c4f74d-4aa5-4aab-a7d5-fab53319cadc

 

3.修改上传地址。

17caaa52-05ae-4e6e-9e6f-de905182b979

JSP示例-Eclipse

演示工程是使用MyEclipse,不能直接导入到Eclipse中,需要通过下面的步骤导入。

1.tomcat 6.xeclipse关联

2.eclipse中新建动态网站项目(dynamic web project)

3.DEMO中的相关项复制到新建的网站项目中

需要复制的文件及文件夹:

src/Xproer

src/Xproer.biz

src/Xproer.uncomplete

WebRoot/db

WebRoot/js

WebRoot/sql

WebRoot/index.htm

WebRoot/WEB-INF/lib

注意:Eclipse中的WebRoot目录名称为WebContent,导入时需要将MyEclipse/WebRoot下的文件复制到Eclipse/WebContent

 

SQL2005

JSP示例-MyEclipse

1.创建数据库

0d62b8b8-f041-4c0f-a8b9-feb10c2c9987

552860fc-8457-46b8-bf5e-e991f09cae41

2.修改数据库配置信息

987a12c1-14c2-4642-81a8-27fa92f8cfa6

 

3.修改上传地址

5188604c-de9c-4454-a317-c60770a220e5

 

4.在浏览器中访问index.htm

cab244ba-0bbc-42e1-b30a-72ce529c585a

JSP示例-Eclipse

演示工程是使用MyEclipse,不能直接导入到Eclipse中,需要通过下面的步骤导入。

1.tomcat 6.xeclipse关联

2.eclipse中新建动态网站项目(dynamic web project)

3.DEMO中的相关项复制到新建的网站项目中

需要复制的文件及文件夹:

src/Xproer

src/Xproer.biz

src/Xproer.uncomplete

WebRoot/db

WebRoot/js

WebRoot/sql

WebRoot/index.htm

WebRoot/WEB-INF/lib

注意:Eclipse中的WebRoot目录名称为WebContent,导入时需要将MyEclipse/WebRoot下的文件复制到Eclipse/WebContent

 

 

2.  测试包布署说明

说明:如果测试服务器在内网,且测试者不能访问互联网,则需要将插件包布署到测试服务器。

如果测试者可访问互联网,则不需要将插件包布署到测试服务器。

1.修改up6.js文件中的配置信息。

path地址改为测试服务器地址。

05a1177f-05dd-4d93-8e6e-6608d5a22b81

 

Firefox,Chrome,cab(x64)安装包布署方法:

1.从官网下载控件安装包

2.将控件安装包布署到测试服务器中

3.JS中控件包地址改为测试服务器地址。

8b3e408e-4c7c-48b0-868e-94bc38e2a226

 

3.  正式包布署说明

说明:正式包是在购买产品后我们会单独制做。

1.up6.cab,up64.cab,up6.crx,up6.nat.crx,up6.xpi,up6.exe上传到项目服务器中。

     up6.cabIE(x86)浏览器插件安装包。

     up64.cabIE(x64)浏览器插件安装包。

     up6.crxChrome浏览器插件安装包。

     up6.nat.crxChrome 45+浏览器插件安装包。

     up6.xpiFirefox浏览器插件安装包。

     up6.exe为控件集成安装包。

2.修改up6.js文件中的配置信息。

将版本号改为最新。

c60331c3-c10d-48a0-a5e8-58c31edf4d7d

 

Firefox,Chrome,cab(x64)布署说明:

1.修改控件包地址

8b3e408e-4c7c-48b0-868e-94bc38e2a226

 

2.修改控件信息

7723c6c5-b4d8-40d4-95ef-1493cd1a58f2

 

4.  流程说明

 

4.1. 单文件上传流程

5d1ccc22-5022-4309-aa68-4103fd9df5b2

 

4.2. 文件续传流程

ca01842b-ed1a-4a57-aadb-3c21373b64d2

数据说明:

fid:文件ID

md5:文件MD5

postLen:已上传长度,控件通过此属性定位续传位置。

pathSvr:文件在服务器中的存储路径。f_post.jsp通过此属性保存文件块数据。

 

4.3. 文件夹上传流程

88790c35-da72-4e2f-a632-caab87ed493d

5,6会循环访问,直到所有文件上传完后再走7的流程。

 

5.  项目说明

d4e822a2-109d-41d2-a12f-8510733997a5

up6.file.js,文件上传对象实现文件,负责文件的上传和续传

up6.folder.js,文件夹上传对象的实现文件,负责文件夹的上传和续传。

up6.js,文件上传管理器。

up6-single.js,单文件上传实现逻辑。

index.htm,多文件上传演示页面。

index-single.htm,单文件上传演示页面。

f_process.sql,文件进度更新存储过程

fd_fileProcess.sql文件夹-子文件进度更新存储过程

up6_files.sql,文件表

up6_folders.sql,文件夹表

 

6.  整合到现有系统中

 

6.1. jsp

 

6.1.1. 复制文件

需要复制的数据如下:

src/Xproer

src/Xproer.biz

src/Xproer.uncomplete

WebRoot/db

WebRoot/js

WebROOT/index.htm

9de22b19-4124-4996-bf72-40948e1a05bc

 

6.1.2. 修改配置

修改数据库配置DbHelper.java

修改up6.js中的配置

修改服务器地址

修改控件包地址

 

6.2. 在页面中引用

1.添加头文件

2.添加引用代码

 

<head></head>标签中间添加下列代码

    <link href="js/up6.css" type="text/css" rel="Stylesheet"/>

    <script type="text/javascript" src="js/jquery-1.4.min.js"></script>

    <script type="text/javascript" src="js/json2.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.config.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.file.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.folder.js" charset="utf-8"></script>

    <script type="text/javascript" src="js/up6.js" charset="utf-8"></script>

    <script language="javascript" type="text/javascript">

        var cbMgr = new HttpUploaderMgr();

 

       $(document).ready(function()

       {

            cbMgr.load_to("FilePanel");

       });

 </script>

 

<body></body>标签中间的适当位置添加下列代码:

<div id="FilePanel"></div>

 

 

 

7.  控件升级

一般情况下控件升级后只需要更新服务器的up6.cab文件和修改up6.js中的控件版本号。用户打开浏览器时IE会自动提示用户安装最新的控件。效果图如下:

9ccbf47d-5510-40f1-8c26-3eed0a549248

主要步骤如下:

1.重新上传up6.cab文件

2.修改up6.js中的控件版本号。

 

7.1. 重新上传up6.cab文件

在控件升级后,我们会将最新的up6.cab文件发给开发人员。开发人员只需要将最新的up6.cab文件上传到服务器即可。

 

7.2. 修改up6.js中的控件版本号

一般情况下,控件更新后版本号也会更新。在重新上传up6.cab后,需要修改控件的版本号。

请找到类似以下代码后,修改version后面的版本号。

     this.Config = {

           "EncodeType"         : "utf-8"

         , "Company"            : "荆门泽优软件有限公司"

         , "Version"            : "2,7,103,31652"

         , "License"            : ""//

         , "Authenticate"        : ""//域验证方式:basic,ntlm

         , "AuthName"            : ""//域帐号

         , "AuthPass"            : ""//域密码

        , "CryptoType"         : "md5"//验证方式:md5,sha1,crc

         , "FileFilter"         : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc

         , "FileSizeLimit"       : "0"//自定义允许上传的文件大小,以字节为单位。0表示不限制。字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

         , "FilesLimit"         : "0"//文件选择数限制。0表示不限制

         , "AllowMultiSelect"   : true//多选开关。1:开启多选。0:关闭多选

         , "RangeSize"           : "1048576"//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:1MB

         , "Debug"               : true//是否打开调式模式。true,false

         , "LogFile"            : "F:\\log.txt"//日志文件路径。需要先打开调试模式。

         , "InitDir"            : ""//初始化路径。示例:D:\\Soft

         , "AppPath"            : ""//网站虚拟目录名称。子文件夹 web

        , "Cookie"             : ""//服务器cookie

        , "QueueCount"         : 1//同时上传的任务数

         //文件夹操作相关

         , "UrlFdCreate"        : "http://localhost:4959/demoSql2005/db/fd_create.aspx"

         , "UrlFdComplete"       : "http://localhost:4959/demoSql2005/db/fd_complete.aspx"

         , "UrlFdDel"           : "http://localhost:4959/demoSql2005/db/fd_del.aspx"

         //文件操作相关

         , "UrlCreate"           : "http://localhost:4959/demoSql2005/db/f_create.aspx"

         , "UrlPost"            : "http://localhost:4959/demoSql2005/db/f_post.aspx"

         , "UrlComplete"        : "http://localhost:4959/demoSql2005/db/f_complete.aspx"

         , "UrlList"            : "http://localhost:4959/demoSql2005/db/f_list.aspx"

         , "UrlDel"             : "http://localhost:4959/demoSql2005/db/f_del.aspx"

         //x86

        , ie: {

               drop: { clsid: "0868BADD-C17E-4819-81DE-1D60E5E734A6", name: "Xproer.HttpDroper6" }

             , part: { clsid: "BA0B719E-F4B7-464b-A664-6FC02126B652", name: "Xproer.HttpPartition6" }

             , path: "http://www.ncmem.com/download/up6.2/up6.cab"

        }

         //x64

        , ie64: {

               drop: { clsid: "7B9F1B50-A7B9-4665-A6D1-0406E643A856", name: "Xproer.HttpDroper6x64" }

             , part: { clsid: "307DE0A1-5384-4CD0-8FA8-500F0FFEA388", name: "Xproer.HttpPartition6x64" }

             , path: "http://www.ncmem.com/download/up6.2/up64.cab"

        }

        , firefox: { name: "", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.xpi" }

        , chrome: { name: "npHttpUploader6", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.crx" }

        , chrome45: { name: "com.xproer.up6", path: "http://www.ncmem.com/download/up6.2/up6.nat.crx" }

        , exe: { path: "http://www.ncmem.com/download/up6.2/up6.exe" }

         , "SetupPath": "http://localhost:4955/demoAccess/js/setup.htm"

        , "Fields": {"uname": "test","upass": "test","uid":"0","fid":"0"}

      };

 

8.  教程

 

 

8.1. 在多个产品中配置

 

8.2. 上传文件夹

 

9.  上传事件

 

9.1. 文件上传完毕

说明:单文件和文件夹的子文件都会触发此事件

    <script language="javascript" type="text/javascript">

        var cbMgr = new HttpUploaderMgr();

        cbMgr.event.fileComplete = function (obj/*FileUploader*/) { /*alert(obj.pathSvr);*/ };

    </script>

 

9.2. 文件夹上传完毕

说明:单文件和文件夹的子文件都会触发此事件

    <script language="javascript" type="text/javascript">

        var cbMgr = new HttpUploaderMgr();

        cbMgr.event.fdComplete = function (obj/*FolderUploader*/) { /*alert(obj.pathSvr);*/ };

    </script>

 

9.3. 文件md5计算完毕

说明:单文件和文件夹的子文件都会触发此事件

    <script language="javascript" type="text/javascript">

        var cbMgr = new HttpUploaderMgr();

        cbMgr.event.md5Complete = function (obj) { /*alert(obj.pathSvr);*/ };

    </script>

 

9.4. 所有文件全部上传完毕

说明:单文件和文件夹的子文件都会触发此事件

    <script language="javascript" type="text/javascript">

        var cbMgr = new HttpUploaderMgr();

        cbMgr.event.queueComplete = function () { /**/ };

    </script>

 

 

10. 用户接口

 

10.1. 控件提交的文件字段

"Content-Disposition: form-data; name="FileName"; filename="

 

10.2. 配置上传地址

文件上传地址一般都在up6.js文件中配置

     this.Config = {

           "EncodeType"         : "utf-8"

         , "Company"            : "荆门泽优软件有限公司"

         , "Version"            : "2,7,103,31652"

         , "License"            : ""//

         , "Authenticate"        : ""//域验证方式:basic,ntlm

         , "AuthName"            : ""//域帐号

         , "AuthPass"            : ""//域密码

        , "CryptoType"         : "md5"//验证方式:md5,sha1,crc

         , "FileFilter"         : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc

         , "FileSizeLimit"       : "0"//自定义允许上传的文件大小,以字节为单位。0表示不限制。字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

         , "FilesLimit"         : "0"//文件选择数限制。0表示不限制

         , "AllowMultiSelect"   : true//多选开关。1:开启多选。0:关闭多选

         , "RangeSize"           : "1048576"//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:1MB

         , "Debug"               : true//是否打开调式模式。true,false

         , "LogFile"            : "F:\\log.txt"//日志文件路径。需要先打开调试模式。

         , "InitDir"            : ""//初始化路径。示例:D:\\Soft

         , "AppPath"            : ""//网站虚拟目录名称。子文件夹 web

        , "Cookie"             : ""//服务器cookie

        , "QueueCount"         : 1//同时上传的任务数

         //文件夹操作相关

         , "UrlFdCreate"        : "http://localhost:4959/demoSql2005/db/fd_create.aspx"

         , "UrlFdComplete"       : "http://localhost:4959/demoSql2005/db/fd_complete.aspx"

         , "UrlFdDel"           : "http://localhost:4959/demoSql2005/db/fd_del.aspx"

         //文件操作相关

         , "UrlCreate"           : "http://localhost:4959/demoSql2005/db/f_create.aspx"

         , "UrlPost"            : "http://localhost:4959/demoSql2005/db/f_post.aspx"

         , "UrlComplete"        : "http://localhost:4959/demoSql2005/db/f_complete.aspx"

         , "UrlList"            : "http://localhost:4959/demoSql2005/db/f_list.aspx"

         , "UrlDel"             : "http://localhost:4959/demoSql2005/db/f_del.aspx"

         //x86

        , ie: {

               drop: { clsid: "0868BADD-C17E-4819-81DE-1D60E5E734A6", name: "Xproer.HttpDroper6" }

             , part: { clsid: "BA0B719E-F4B7-464b-A664-6FC02126B652", name: "Xproer.HttpPartition6" }

             , path: "http://www.ncmem.com/download/up6.2/up6.cab"

        }

         //x64

        , ie64: {

               drop: { clsid: "7B9F1B50-A7B9-4665-A6D1-0406E643A856", name: "Xproer.HttpDroper6x64" }

             , part: { clsid: "307DE0A1-5384-4CD0-8FA8-500F0FFEA388", name: "Xproer.HttpPartition6x64" }

             , path: "http://www.ncmem.com/download/up6.2/up64.cab"

        }

        , firefox: { name: "", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.xpi" }

        , chrome: { name: "npHttpUploader6", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.crx" }

        , chrome45: { name: "com.xproer.up6", path: "http://www.ncmem.com/download/up6.2/up6.nat.crx" }

        , exe: { path: "http://www.ncmem.com/download/up6.2/up6.exe" }

         , "SetupPath": "http://localhost:4955/demoAccess/js/setup.htm"

        , "Fields": {"uname": "test","upass": "test","uid":"0","fid":"0"}

      };

 

10.3. 设置服务器编码方式

服务器编码设置一般都在up6.js文件中配置

说明:控件向服务器发送的数据会根据此设置来进行编码。此设置必须与服务器编码保持一致。

     this.Config = {

           "EncodeType"         : "utf-8"

         , "Company"            : "荆门泽优软件有限公司"

         , "Version"            : "2,7,103,31652"

         , "License"            : ""//

         , "Authenticate"        : ""//域验证方式:basic,ntlm

         , "AuthName"            : ""//域帐号

         , "AuthPass"            : ""//域密码

        , "CryptoType"         : "md5"//验证方式:md5,sha1,crc

         , "FileFilter"         : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc

         , "FileSizeLimit"       : "0"//自定义允许上传的文件大小,以字节为单位。0表示不限制。字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

         , "FilesLimit"         : "0"//文件选择数限制。0表示不限制

         , "AllowMultiSelect"   : true//多选开关。1:开启多选。0:关闭多选

         , "RangeSize"           : "1048576"//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:1MB

         , "Debug"               : true//是否打开调式模式。true,false

         , "LogFile"            : "F:\\log.txt"//日志文件路径。需要先打开调试模式。

         , "InitDir"            : ""//初始化路径。示例:D:\\Soft

         , "AppPath"            : ""//网站虚拟目录名称。子文件夹 web

        , "Cookie"             : ""//服务器cookie

        , "QueueCount"         : 1//同时上传的任务数

         //文件夹操作相关

         , "UrlFdCreate"        : "http://localhost:4959/demoSql2005/db/fd_create.aspx"

         , "UrlFdComplete"       : "http://localhost:4959/demoSql2005/db/fd_complete.aspx"

         , "UrlFdDel"           : "http://localhost:4959/demoSql2005/db/fd_del.aspx"

         //文件操作相关

         , "UrlCreate"           : "http://localhost:4959/demoSql2005/db/f_create.aspx"

         , "UrlPost"            : "http://localhost:4959/demoSql2005/db/f_post.aspx"

         , "UrlComplete"        : "http://localhost:4959/demoSql2005/db/f_complete.aspx"

         , "UrlList"            : "http://localhost:4959/demoSql2005/db/f_list.aspx"

         , "UrlDel"             : "http://localhost:4959/demoSql2005/db/f_del.aspx"

         //x86

        , ie: {

               drop: { clsid: "0868BADD-C17E-4819-81DE-1D60E5E734A6", name: "Xproer.HttpDroper6" }

             , part: { clsid: "BA0B719E-F4B7-464b-A664-6FC02126B652", name: "Xproer.HttpPartition6" }

             , path: "http://www.ncmem.com/download/up6.2/up6.cab"

        }

         //x64

        , ie64: {

               drop: { clsid: "7B9F1B50-A7B9-4665-A6D1-0406E643A856", name: "Xproer.HttpDroper6x64" }

             , part: { clsid: "307DE0A1-5384-4CD0-8FA8-500F0FFEA388", name: "Xproer.HttpPartition6x64" }

             , path: "http://www.ncmem.com/download/up6.2/up64.cab"

        }

        , firefox: { name: "", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.xpi" }

        , chrome: { name: "npHttpUploader6", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.crx" }

        , chrome45: { name: "com.xproer.up6", path: "http://www.ncmem.com/download/up6.2/up6.nat.crx" }

        , exe: { path: "http://www.ncmem.com/download/up6.2/up6.exe" }

         , "SetupPath": "http://localhost:4955/demoAccess/js/setup.htm"

        , "Fields": {"uname": "test","upass": "test","uid":"0","fid":"0"}

      };

 

10.4. 设置允许上传的文件类型

文件上传类型一般都在up6.js文件中配置

     this.Config = {

           "EncodeType"         : "utf-8"

         , "Company"            : "荆门泽优软件有限公司"

         , "Version"            : "2,7,103,31652"

         , "License"            : ""//

         , "Authenticate"        : ""//域验证方式:basic,ntlm

         , "AuthName"            : ""//域帐号

         , "AuthPass"            : ""//域密码

        , "CryptoType"         : "md5"//验证方式:md5,sha1,crc

         , "FileFilter"         : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc

         , "FileSizeLimit"       : "0"//自定义允许上传的文件大小,以字节为单位。0表示不限制。字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

         , "FilesLimit"         : "0"//文件选择数限制。0表示不限制

         , "AllowMultiSelect"   : true//多选开关。1:开启多选。0:关闭多选

         , "RangeSize"           : "1048576"//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:1MB

         , "Debug"               : true//是否打开调式模式。true,false

         , "LogFile"            : "F:\\log.txt"//日志文件路径。需要先打开调试模式。

         , "InitDir"            : ""//初始化路径。示例:D:\\Soft

         , "AppPath"            : ""//网站虚拟目录名称。子文件夹 web

        , "Cookie"             : ""//服务器cookie

        , "QueueCount"         : 1//同时上传的任务数

         //文件夹操作相关

         , "UrlFdCreate"        : "http://localhost:4959/demoSql2005/db/fd_create.aspx"

         , "UrlFdComplete"       : "http://localhost:4959/demoSql2005/db/fd_complete.aspx"

         , "UrlFdDel"           : "http://localhost:4959/demoSql2005/db/fd_del.aspx"

         //文件操作相关

         , "UrlCreate"           : "http://localhost:4959/demoSql2005/db/f_create.aspx"

         , "UrlPost"            : "http://localhost:4959/demoSql2005/db/f_post.aspx"

         , "UrlComplete"        : "http://localhost:4959/demoSql2005/db/f_complete.aspx"

         , "UrlList"            : "http://localhost:4959/demoSql2005/db/f_list.aspx"

         , "UrlDel"             : "http://localhost:4959/demoSql2005/db/f_del.aspx"

         //x86

        , ie: {

               drop: { clsid: "0868BADD-C17E-4819-81DE-1D60E5E734A6", name: "Xproer.HttpDroper6" }

             , part: { clsid: "BA0B719E-F4B7-464b-A664-6FC02126B652", name: "Xproer.HttpPartition6" }

             , path: "http://www.ncmem.com/download/up6.2/up6.cab"

        }

         //x64

        , ie64: {

               drop: { clsid: "7B9F1B50-A7B9-4665-A6D1-0406E643A856", name: "Xproer.HttpDroper6x64" }

             , part: { clsid: "307DE0A1-5384-4CD0-8FA8-500F0FFEA388", name: "Xproer.HttpPartition6x64" }

             , path: "http://www.ncmem.com/download/up6.2/up64.cab"

        }

        , firefox: { name: "", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.xpi" }

        , chrome: { name: "npHttpUploader6", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.crx" }

        , chrome45: { name: "com.xproer.up6", path: "http://www.ncmem.com/download/up6.2/up6.nat.crx" }

        , exe: { path: "http://www.ncmem.com/download/up6.2/up6.exe" }

         , "SetupPath": "http://localhost:4955/demoAccess/js/setup.htm"

        , "Fields": {"uname": "test","upass": "test","uid":"0","fid":"0"}

      };

 

假设我们设置允许上传的文件类型为jpg,bmp,png,gif,则效果图如下:

cd1f2a85-e83b-4039-875b-9d5e1b14b8dc

 

10.5. 设置允许上传的文件大小

在线字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

允许上传的文件大小一般都在up6.js文件中配置

     this.Config = {

           "EncodeType"         : "utf-8"

         , "Company"            : "荆门泽优软件有限公司"

         , "Version"            : "2,7,103,31652"

         , "License"            : ""//

         , "Authenticate"        : ""//域验证方式:basic,ntlm

         , "AuthName"            : ""//域帐号

         , "AuthPass"            : ""//域密码

        , "CryptoType"         : "md5"//验证方式:md5,sha1,crc

         , "FileFilter"         : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc

         , "FileSizeLimit"       : "0"//自定义允许上传的文件大小,以字节为单位。0表示不限制。字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

         , "FilesLimit"         : "0"//文件选择数限制。0表示不限制

         , "AllowMultiSelect"   : true//多选开关。1:开启多选。0:关闭多选

         , "RangeSize"           : "1048576"//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:1MB

         , "Debug"               : true//是否打开调式模式。true,false

         , "LogFile"            : "F:\\log.txt"//日志文件路径。需要先打开调试模式。

         , "InitDir"            : ""//初始化路径。示例:D:\\Soft

         , "AppPath"            : ""//网站虚拟目录名称。子文件夹 web

        , "Cookie"             : ""//服务器cookie

        , "QueueCount"         : 1//同时上传的任务数

         //文件夹操作相关

         , "UrlFdCreate"        : "http://localhost:4959/demoSql2005/db/fd_create.aspx"

         , "UrlFdComplete"       : "http://localhost:4959/demoSql2005/db/fd_complete.aspx"

         , "UrlFdDel"           : "http://localhost:4959/demoSql2005/db/fd_del.aspx"

         //文件操作相关

         , "UrlCreate"           : "http://localhost:4959/demoSql2005/db/f_create.aspx"

         , "UrlPost"            : "http://localhost:4959/demoSql2005/db/f_post.aspx"

         , "UrlComplete"        : "http://localhost:4959/demoSql2005/db/f_complete.aspx"

         , "UrlList"            : "http://localhost:4959/demoSql2005/db/f_list.aspx"

         , "UrlDel"             : "http://localhost:4959/demoSql2005/db/f_del.aspx"

         //x86

        , ie: {

               drop: { clsid: "0868BADD-C17E-4819-81DE-1D60E5E734A6", name: "Xproer.HttpDroper6" }

             , part: { clsid: "BA0B719E-F4B7-464b-A664-6FC02126B652", name: "Xproer.HttpPartition6" }

             , path: "http://www.ncmem.com/download/up6.2/up6.cab"

        }

         //x64

        , ie64: {

               drop: { clsid: "7B9F1B50-A7B9-4665-A6D1-0406E643A856", name: "Xproer.HttpDroper6x64" }

             , part: { clsid: "307DE0A1-5384-4CD0-8FA8-500F0FFEA388", name: "Xproer.HttpPartition6x64" }

             , path: "http://www.ncmem.com/download/up6.2/up64.cab"

        }

        , firefox: { name: "", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.xpi" }

        , chrome: { name: "npHttpUploader6", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.crx" }

        , chrome45: { name: "com.xproer.up6", path: "http://www.ncmem.com/download/up6.2/up6.nat.crx" }

        , exe: { path: "http://www.ncmem.com/download/up6.2/up6.exe" }

         , "SetupPath": "http://localhost:4955/demoAccess/js/setup.htm"

        , "Fields": {"uname": "test","upass": "test","uid":"0","fid":"0"}

      };

 

10.6. 设置文件块大小

在线字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

文件块大小一般都在up6.js文件中配置。

一般情况下推荐设置为1MB,这是为了保证在网络环境不稳定的情况下,控件能够正常上传。如果用户的网络环境比较稳定,可适当调大这个值。

     this.Config = {

           "EncodeType"         : "utf-8"

         , "Company"            : "荆门泽优软件有限公司"

         , "Version"            : "2,7,103,31652"

         , "License"            : ""//

         , "Authenticate"        : ""//域验证方式:basic,ntlm

         , "AuthName"            : ""//域帐号

         , "AuthPass"            : ""//域密码

        , "CryptoType"         : "md5"//验证方式:md5,sha1,crc

         , "FileFilter"          : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc

         , "FileSizeLimit"       : "0"//自定义允许上传的文件大小,以字节为单位。0表示不限制。字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

         , "FilesLimit"         : "0"//文件选择数限制。0表示不限制

         , "AllowMultiSelect"   : true//多选开关。1:开启多选。0:关闭多选

         , "RangeSize"           : "1048576"//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:1MB

         , "Debug"               : true//是否打开调式模式。true,false

         , "LogFile"            : "F:\\log.txt"//日志文件路径。需要先打开调试模式。

         , "InitDir"            : ""//初始化路径。示例:D:\\Soft

         , "AppPath"            : ""//网站虚拟目录名称。子文件夹 web

        , "Cookie"              : ""//服务器cookie

        , "QueueCount"         : 1//同时上传的任务数

         //文件夹操作相关

         , "UrlFdCreate"        : "http://localhost:4959/demoSql2005/db/fd_create.aspx"

         , "UrlFdComplete"       : "http://localhost:4959/demoSql2005/db/fd_complete.aspx"

         , "UrlFdDel"           : "http://localhost:4959/demoSql2005/db/fd_del.aspx"

         //文件操作相关

         , "UrlCreate"           : "http://localhost:4959/demoSql2005/db/f_create.aspx"

         , "UrlPost"            : "http://localhost:4959/demoSql2005/db/f_post.aspx"

         , "UrlComplete"        : "http://localhost:4959/demoSql2005/db/f_complete.aspx"

         , "UrlList"            : "http://localhost:4959/demoSql2005/db/f_list.aspx"

         , "UrlDel"             : "http://localhost:4959/demoSql2005/db/f_del.aspx"

         //x86

        , ie: {

               drop: { clsid: "0868BADD-C17E-4819-81DE-1D60E5E734A6", name: "Xproer.HttpDroper6" }

             , part: { clsid: "BA0B719E-F4B7-464b-A664-6FC02126B652", name: "Xproer.HttpPartition6" }

             , path: "http://www.ncmem.com/download/up6.2/up6.cab"

        }

         //x64

        , ie64: {

               drop: { clsid: "7B9F1B50-A7B9-4665-A6D1-0406E643A856", name: "Xproer.HttpDroper6x64" }

             , part: { clsid: "307DE0A1-5384-4CD0-8FA8-500F0FFEA388", name: "Xproer.HttpPartition6x64" }

             , path: "http://www.ncmem.com/download/up6.2/up64.cab"

        }

        , firefox: { name: "", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.xpi" }

        , chrome: { name: "npHttpUploader6", type: "application/npHttpUploader6", path: "http://www.ncmem.com/download/up6.2/up6.crx" }

        , chrome45: { name: "com.xproer.up6", path: "http://www.ncmem.com/download/up6.2/up6.nat.crx" }

        , exe: { path: "http://www.ncmem.com/download/up6.2/up6.exe" }

         , "SetupPath": "http://localhost:4955/demoAccess/js/setup.htm"

        , "Fields": {"uname": "test","upass": "test","uid":"0","fid":"0"}

      };

 

10.7. 设置附加信息

自定义附加字段在up6.js中定义,也可以不用定义:

bffaf0e8-db48-4ab7-bc4a-360235c2ef04

注意:

1.附加字段必须是字符串类型。

2.如果附加字段的值包含中文,在上传前必须使用encodeURIComponent进行编码。

 

 

在引用页面通过Fields属性来添加自定义字段:

326b0e3a-fc37-4c3b-931a-495404be8322

 

使用AJAX向服务器提交附加字段:

1ce35304-ddf1-4f31-9c6b-365b05bfbb32

 

f_create.jsp中接收附加字段:

e40e3dbe-f9de-4aea-956c-fab541549493

 

 

附加信息的作用就是在上传图片的同时向服务器提交额外的字段信息。比如当用户向服务器上传截图时,服务器需要知道是哪位用户上传的截图,这时可以将用户ID添加到附加信息中,这样服务器在获取截图信息的同时也能够根据附加信息知道是哪位用户上传的截图。

客户端:

cbMgr.Config.Fields["UserName"] = "test";

服务端:

string fname = Request.QueryString["UserName"];

 

开发人员可以根据自已的业务需求来扩展附加信息:

客户端:

cbMgr.Config.Fields["f1"] = "f1";

cbMgr.Config.Fields["f2"] = "f2";

cbMgr.Config.Fields["f3"] = "f3";

cbMgr.Config.Fields["f4"] = "f4";

cbMgr.Config.Fields["f5"] = "f5";

服务端(ASP.NET)

string f1 = Request.QueryString["f1"];

string f2 = Request.QueryString["f2"];

string f3 = Request.QueryString["f3"];

string f4 = Request.QueryString["f4"];

string f5 = Request.QueryString["f5"];

 

10.8. 上传本地文件

主要步骤如下:

1.调用addFileLoc函数添加本地文件,注意路径需要使用双斜框(\\)

2.调用PostFirst函数开始上传文件。

    <script language="javascript" type="text/javascript">

    var cbMgr = new HttpUploaderMgr();

 

    $(document).ready(function()

    {

         cbMgr.load_to("FilePanel");

     });

 

     //上传本地文件

     function postFileLoc()

     {

         cbMgr.addFileLoc("D:\\soft\\QQ2013.exe");

         cbMgr.PostFirst();

     }

    </script>

 

10.9. 从剪帖板中获取文件列表

为了使上传文件的操作更加方便,我们在Xproer.HttpPartition4中增加了一个接口GetClipboardFiles()。通过这个接口用户能够非常方便的在资源管理器中复制文件,然后在上传页面中粘贴上传。

以下代码演示粘贴文件的功能

    <script language="javascript" type="text/javascript">

        var cbMgr = new HttpUploaderMgr();

 

    $(document).ready(function()

    {

         cbMgr.load_to("FilePanel");

    });

 

    function paste_files()

    {

        cbMgr.paste_files();

    }

 

10.10. 自定义服务器文件名称

示例中服务器文件名称默认是使用文件md5+扩展名的形式命名。如果需要自定义服务器文件名称则可以修改下面的代码:

9ebd513a-5ab6-4de4-be93-ec8cd6df1992

 

ASP.NET:

b0970a53-7d98-461d-958e-29c3c5f9d42e

 

 

10.11. 文件保存位置

up6.1中有两种保存模式,一种是md5一种是uuid

md5PathMd5Builder生成存储路径。md5主要提供给文件使用,可在服务器端保存唯一的文件,有效避免重复文件。

uuidPathUuidBuilder生成存储路径。uuid主要提供给文件夹使用,可以与本地文件夹结构完全保持一致。使用uuid模式上传文件夹时秒传功能会失效。

asp.net代码截图:

bc1277cb-ee1f-4e51-9aef-0b4fd778abc7

 

java代码截图:

0c9a311b-9b93-401c-8193-5f4b5f608608

 

php代码截图:

e05018ad-e007-4705-8e43-f7c3a3081ef8

 

10.12. 事件

md5Complete

md5计算完毕时调用

a9b94ce0-fbe7-466d-9b39-850ea7e5a227

示例:

d94aa414-6485-469c-82a1-bcedd1544a06

 

fileComplete

文件上传完毕时调用

a67d76d0-40ca-40a5-a27e-8e08256b207f

示例:

da809655-6dfd-4a96-b2e0-f098f673ebb1

 

fdComplete

文件夹上传完毕时调用

80ab27e7-d4c5-41f7-bca5-c59b94ba8c63

 

queueComplete

队列上传完毕时调用

0c89158b-c2a2-4e78-b7e1-019aa7fae5a8

 

11. 业务逻辑

11.1. 服务端

 

11.1.1. jsp

自定义文件保存路径

文件保存位置主要由PathMd5Builder.java, PathMd5Builder.cs, PathMd5Builder.php控制。

路径格式:项目路径\upload\2013\04\15\md5.rar

jsp代码截图:

c70a44be-231f-4f7c-b243-c1265c27bc80

 

11.2. 客户端

 

11.3. 管理器-HttpUploaderMgr

负责文件夹和文件的上传管理功能。

90cbb3e1-f8e1-439d-b40b-31c8c6983781

 

11.3.1. 文件上传完毕事件

a67d76d0-40ca-40a5-a27e-8e08256b207f

fileComplete为文件上传完毕事件,每一个文件上传完毕都会触发此事件。

 

11.3.2. 所有文件上传完毕事件

0c89158b-c2a2-4e78-b7e1-019aa7fae5a8

queueComplete为队列上传完毕事件,当所有文件和文件夹上传完毕后会触发此事件。

可以通过arrFilesComplete属性获取所有已经上传完毕的文件和文件夹

4d14b9af-a0f5-4be7-81ad-94ec83798427

 

触发位置:

e59eb429-1ea0-4f00-8a00-6922abb00e96

 

11.3.3. 选择文件

24f49097-d8ca-4ee5-9ba7-90fe1ff010d4

 

11.3.4. 选择文件夹

9eed0fe5-5e77-4965-8ea5-4e9d09b3de18

 

11.4. 已上传完列表

 

61c2b98e-cd10-4f43-b758-329c761178d6

11.4.1. 加载数据

f4f918e3-2a8e-41d8-8532-99ee630ea318

d0ce2af9-96c6-4c56-9c0b-deadaed36cd2

 

f19273d6-963a-4137-b29c-3f3be54bb18e

 

11.5. 文件

11.5.1. html模板

761df019-99c0-4310-89c1-8c6dc4e62d1f

 

11.5.2. 文件上传对象

function FileUploader(fileLoc, mgr)

5dc24192-0dff-4525-b664-3062e646af05

 

 

11.5.3. 文件进度信息

post_process

09e47e4b-7e9c-4df7-a898-1a705b4722e7

 

11.5.4. 文件续传

 

this.ResumeFile = function(fileSvr)

11ee55a3-52da-4b2e-886d-9de068888e64

 

在文件列表中续传

363a753f-66c8-4c69-b878-3acdce575e62

 

11.5.5. 添加到文件列表

bcf93d3b-8427-4668-91de-6f45282fbef7

 

19f808d1-753a-4075-876e-d8baf8410e10

 

91e32a2a-47df-499b-8a51-fa5a750ec062

 

11.6. 文件夹

openFolder

 

openFolders: function ()

 

function FolderUploader(idLoc,jsonStr,mgr)

 

md5计算完毕

this.md5_complete = function (json)

 

11.6.1. 文件夹对象

文件夹上传对象内部保存一个文件列表(HttpUploader),文件夹上传时,将依次上传这个文件列表。

 

function FolderUploader(idLoc,fdLoc,mgr)

ae2663be-291a-4295-8ff9-d37117377c19

参数:

idLoc:任务ID,唯一标识。

fdLoc:文件夹JSON字符串。

mgr:文件上传管理对象。

 

11.6.2. 初始化

up6.folder.js

f46b7990-ba9e-43d3-85bc-371c6cee9c94

fd_create

 

 

11.6.3. 续传

 

取数据

uc_builder,uc_file_child,uc_folder自动生成文件夹续传数据,并合并到files

b79647eb-fc2d-4431-882c-f103cce48e8f

 

加载文件列表

f_list

up6.js

     FileListMgr.LoadData

2fb7b928-3fa8-4603-8ba1-b6473d028f4c

ResumeFolder

0941ce4e-8735-4a52-8244-8af09cbfff76

212882b5-66fa-4e6e-b5fe-1d27ab4a0a02

 

 

11.6.4. 更新文件存储路径

f_create.aspx.cs

d134241c-c835-4d4e-9ce2-24f76c44902e

f_create.jsp

8556f862-9309-4093-a3b1-5004a41cea89

f_create.php

b465b318-1f21-42b1-814f-0e85e3b2783c

 

 

11.6.5. 文件命名规则

 

jsp

6e3069cb-8c26-4901-9307-4ec21b19d3c8

 

11.6.6. 文件夹JSON格式

通过控件获取文件夹JSON信息:

     [

          [name:"soft"

          ,pid:0                //父级ID

          ,idLoc:0              //文件夹IDJS自定义

          ,idSvr:0              //文件夹ID,与数据库中的xdb_folder.fd_id对应。

          ,length:"102032"      //数字化的文件夹大小,以字节为单位

          ,size:"10G"           //格式化的文件夹大小

          ,pathLoc:"d:\\soft"   //文件夹在客户端的路径

          ,pathSvr:"e:\\web"    //文件夹在服务端的路径

          ,foldersCount:0       //子文件夹总数

          ,filesCount:0         //子文件总数

          ,filesComplete:0      //已上传完成的子文件总数

          ,folders:[

                {name:"img1",pidLoc:0,pidSvr:10,idLoc:1,idSvr:0,pathLoc:"D:\\Soft\\img1",pathSvr:"E:\\Web"}

               ,{name:"img2",pidLoc:1,pidSvr:10,idLoc:2,idSvr:0,pathLoc:"D:\\Soft\\image2",pathSvr:"E:\\Web"}

               ,{name:"img3",pidLoc:2,pidSvr:10,idLoc:3,idSvr:0,pathLoc:"D:\\Soft\\image2\\img3",pathSvr:"E:\\Web"}

               ]

          ,files:[

                {name:"f1.exe",idLoc:0,idSvr:0,pidRoot:0,pidLoc:1,pidSvr:0,length:"100",size:"100KB",pathLoc:"",pathSvr:""}

               ,{name:"f2.exe",idLoc:0,idSvr:0,pidRoot:0,pidLoc:1,pidSvr:0,length:"100",size:"100KB",pathLoc:"",pathSvr:""}

               ,{name:"f3.exe",idLoc:0,idSvr:0,pidRoot:0,pidLoc:1,pidSvr:0,length:"100",size:"100KB",pathLoc:"",pathSvr:""}

               ,{name:"f4.rar",idLoc:0,idSvr:0,pidRoot:0,pidLoc:1,pidSvr:0,length:"100",size:"100KB",pathLoc:"",pathSvr:""}

               ]

     ]

 

 

11.6.7. 区分文件夹和文件上传任务

FolderUploaderFileUploader都有一个isFolder属性。

FolderUploader.isFolder属性为true,FileUploader.isFolder属性为false

 

11.6.8. 获取文件夹JSON数据

 

JavaScript:

08ce0668-f228-4ae6-a076-1e1d361584b8

 

11.6.9. 上传文件夹

逻辑:

1.将文件夹JSON保存到数据表。

2.更新JSON中的idSvr信息。

3.向数据表添加文件信息?

上传文件时,将会又添加一次信息。重复了。

新逻辑:

     向文件数据表添加文件数据,这样续传文件夹时,就可以读取文件信息

         这时没有创建文件,文件信息中没有MD5信息。

     创建文件时,增加附加字段idSvr,服务端通过这个字段判断是否更新数据表信息,并创建文件。

3.返回更新后的JSON

 

添加文件夹

e30e366b-d281-4114-8ae1-979323a0cc22

 

8ff745e8-2cf5-4943-baf9-b27f2811076b

 

11.6.10. 停止上传

this.stop = function ()

d7a82acf-5d61-401c-9626-07866330d3af

 

 

11.6.11. 上传文件夹中的文件

d515e873-2945-469b-96bb-4ba05b57bce4

 

 

11.6.12. 服务器创建文件夹JSON信息

fd_create.aspx

     解析文件夹

         创建文件夹

         设置子文件的pid

     解析文件

         向数据库添加文件信息,设置文件pid,pidRoot信息。

         更新文件的pidSvr(父级目录ID),pidRoot(根级目录ID),idSvr(数据库ID)

              f_create.aspx根据idSvr更新文件数据表信息,并创建文件。

 

11.6.13. 存储位置

文件夹存储分两种模式一种是md5模式,一种是uuid模式。md5模式会判断重复文件,uuid模式不会判断重复文件但是会与客户端文件夹保持完全一致。

无论是md5模式还是uuid模式都会在数据库中保存层级结构信息。

选择建议:

如果需要在服务端保留完整文件夹层级结构就选择uuid

如果在服务端希望不保存重复文件就选择md5

 

md5模式存储

说明:md5存储模式在服务器端不会存在重复文件,适用于对存储空间有较高要求的项目,如互联网项目

1.修改配置

251b04ce-80cc-4d8a-ab53-0a7732fa88ed

 

2.使用md5路径生成器

85c533ce-7e10-4712-b0b2-7aed109aa3cf

 

 

3.fd_create.aspx中使用md5路径生成器

263c0fcb-8871-4eb1-ba6e-5d27282c56cd

 

最终效果

7e53a38d-900b-4e7d-932a-88df74894ad3

 

数据库

5a5608f9-0580-4df2-94f0-caa36f2c62f7

 

 

uuid模式存储

为解决文件夹层级结构的问题我们重新设计了路径生成器,借助于新的生成器开发者能够轻松保存本地文件夹信息。

说明:以uuid存储模式上传文件夹将保留原始文件名称和文件夹层级结构,也就是说uuid将完全使用本地文件夹结构来存储。满足政府部门的特定的需求。

uuid存储规则:upload/uid/folders/uuid/folder_name

注意:uuid将不会检查文件重复。uuid会为每一个文件夹单独生成一个uuid,以此来解决文件夹重名问题。 如果用户上传两个同名文件夹test,最终它们会被分别存储在两个uuid文件夹下面。

 

1.修改配置fd_create_uuid.aspx

8cf2f88a-022f-4978-9b7c-05436c1a8c78

 

2.使用uuid路径生成器

386072e5-17bd-4109-aefb-5d9bbcbd6c22

 

3.fd_create_uuid.aspx中使用uuid生成器

c46a2145-50d6-4998-8b14-a405ae1d1aa9

 

最终效果:

本地文件夹结构

5542d618-084d-41c5-b45a-2cdd124ae925

 

远程文件夹结构

a4c9460b-540e-4920-bf74-4bfb51920180

 

 

11.6.14. 从服务端取文件夹JSON信息

fd_json.aspx

1.取根文件夹信息

2.根据f_pidRoot取所有子文件信息。只取未上传完的文件列表

3.不需要取子文件夹信息。因为只需要续传文件即可。

 

11.6.15. 文件夹在服务器保存位置

一般在fd_create.aspx.cs中创建。

代码如下:

 

子文件位置在fd_create.aspx.cs指定

e301663d-7dc1-4910-bc39-6c87f4f3f456

 

文件夹中的文件以原始文件名称保存

fd_create_uuid.aspx.cs中创建子文件:

8050640c-0c77-4886-bb39-de5d8f53274d

 

规则如下:

upload////文件夹名称/文件名称。

 

11.6.16. 子文件上传

主要流程如下:

1.fd_create.aspx.cs中分配子文件路径,并保存在数据库中,然后返回数据表中文件的id(idSvr)

2.客户端将文件id和文件在远程服务器的路径传给服务端,f_cretae.aspx.cs根据客户端的id,路径(pathSvr)创建文件。

3.f_post.aspx.cs根据客户端idSvr来写入文件数据。

 

11.6.17. 在未上传完文件列表中显示文件和文件夹

1.    将文件夹信息保存到up6_files表中,通过f_list.aspx加载。

2.    up6_files中增加字段:f_fdTask,表示这是一个文件夹上传任务

3.    up6_filesf_fdChild表示文件是文件夹中的子文件。

4.    up6_folder中存储的信息与up6_files.f_fdID对应。

5.    续传时,判断文件列表项中的文件是不是文件夹任务,如果是,先从服务端取JSON信息。

 

up6.js

, "LoadData": function ()//从服务器加载数据

     f_list.aspx

     DBFile.GetAllUnComplete2//在此函数中判断文件夹项,并为更新文件夹项信息(总大小,已上传百分比较)。

 

12. 用户界面设计

上传界面由HTML拼接而成,主要由GetHtmlFiles方法返回,代码如下:

其中fileItem表示文件项模板,folderItem表示文件夹项模板

开发人员可以通过修改fileItem的结构来调整界面风格。

068adaf3-e281-4b66-ada1-677b182ec0f4

 

与文件上传对象关联代码:

7cfd993b-f820-4f9f-88e3-898a9a3e4ef8

 

在调整界面样式和风格时可以借助于浏览器调试器工具来辅助设计,以下界面演示使用IE-开发人员工具查看文件项结构

3dd9367c-9f7c-4b79-8cb1-0e33027c62bb

 

 

13. 断点续传

68a4cd19-986e-4667-9ef2-ca1fd13731a2

06a61d1a-836b-4f4d-9b23-e2da6bade1bd

 

13.1. IIS 6.0的设置

dae54400-e538-442e-8b69-b4544778be3a

开启保持HTTP连接

23aa209d-48a6-41ec-a29c-c8402fca2860

 

13.2. tomcat设置

打开conf/server.xml文件

Connector节点中,修改keepAliveTimeout属性和maxKeepAliveRequests属性。建议将数值调整到最大。

<Connector executor="tomcatThreadPool"

               port="80"

protocol="HTTP/1.1"

maxThreads="600"

minSpareThreads="100"

maxSpareThreads="300"

               connectionTimeout="60000"

               keepAliveTimeout="15000"

               maxKeepAliveRequests="1"

               redirectPort="443"

               ....../>

参数说明:

connectionTimeout - 网络连接超时,单位:毫秒。设置为0表示永不超时,这样设置有隐患的。通常可设置为30000毫秒。

keepAliveTimeout - 长连接最大保持时间(毫秒)。此处为15秒。

maxKeepAliveRequests - 最大长连接个数(1表示禁用,-1表示不限制个数,默认100个。一般设置在100~200之间) the maximum number of HTTP requests that can be held in the pipeline until the connection is closed by the server. Setting this attribute to 1 disables HTTP/1.0 keep-alive, as well as HTTP/1.1 keep-alive and pipelining. Setting this to -1 allows an unlimited number of pipelined or keep-alive HTTP requests. If not specified, this attribute is set to 100.

 

13.3. glassfish设置

参考地址:http://www.iteye.com/topic/656368

 

14. 数据库设计

14.1. MySQL

表名:up6_files

序号

列名

数据类型

长度

小数位

标识

主键

允许空

默认值

说明

1

f_id

int

11

 

 

自增ID

2

f_pid

int

11

 

 

 

0

父级文件夹ID

3

f_pidRoot

int

11

 

 

 

0

根级文件夹ID

4

f_fdTask

tinyint

1

 

 

 

0

表示是否是一个文件夹上传任务

5

f_fdID

int

11

 

 

 

0

文件夹详细ID,与xdb_folders.fd_id对应。

6

f_fdChild

tinyint

1

 

 

 

0

是文件夹中的子项。

7

f_uid

int

11

 

 

 

0

用户ID。与第三方系统整合使用。

8

f_nameLoc

varchar

255

 

 

 

 

文件在本地电脑中的名称。

9

f_nameSvr

varchar

255

 

 

 

 

文件在服务器中的名称。

10

f_pathLoc

varchar

255

 

 

 

 

文件在本地电脑中的完整路径。示例:D:\Soft\QQ2012.exe

11

f_pathSvr

varchar

255

 

 

 

 

文件在服务器中的完整路径。示例:F:\ftp\uer\md5.exe

12

f_pathRel

varchar

255

 

 

 

 

文件在服务器中的相对路径。示例:/www/web/upload/md5.exe

13

f_md5

varchar

40

 

 

 

 

文件MD5

14

f_lenLoc

bigint

19

 

 

 

0

文件总大小。以字节为单位.9,223,372,036,854,775,807 之间的整数

15

f_sizeLoc

varchar

10

 

 

 

0

格式化的文件尺寸。示例:10.03MB

16

f_pos

bigint

19

 

 

 

0

文件续传位置。9,223,372,036,854,775,807 之间的整数

17

f_lenSvr

bigint

19

 

 

 

0

已上传大小。9,223,372,036,854,775,807 之间的整数

18

f_perSvr

varchar

6

 

 

 

0%

已上传百分比。示例:10%

19

f_complete

tinyint

1

 

 

 

0

表示是否已上传完

20

f_time

timestamp

 

 

 

 

CURRENT_TIMESTAMP

文件上传时间

21

f_deleted

tinyint

1

 

 

 

0

是否已删除。

 

表名:up6_folders

序号

列名

数据类型

长度

小数位

标识

主键

允许空

默认值

说明

1

fd_id

int

11

 

 

文件夹ID

2

fd_name

varchar

50

 

 

 

 

文件夹名称

3

fd_pid

int

11

 

 

 

0

父级ID

4

fd_uid

int

11

 

 

 

0

用户ID

5

fd_length

bigint

19

 

 

 

0

数字化的大小。以字节为单位,示例:1023254

6

fd_size

varchar

50

 

 

 

0

格式化的大小。示例:10G

7

fd_pathLoc

varchar

255

 

 

 

 

文件夹在客户端的路径

8

fd_pathSvr

varchar

255

 

 

 

 

文件夹在服务端的路径

9

fd_folders

int

11

 

 

 

0

文件夹数

10

fd_files

int

11

 

 

 

0

文件数

11

fd_filesComplete

int

11

 

 

 

0

已上传完的文件数。

12

fd_complete

tinyint

1

 

 

 

0

是否已上传完毕

13

fd_delete

tinyint

1

 

 

 

0

是否已删除

14

fd_json

varchar

20000

 

 

 

 

文件夹的JSON数据格式。

15

timeUpload

timestamp

 

 

 

 

CURRENT_TIMESTAMP

上传时间

16

fd_pidRoot

int

11

 

 

 

0

跟级ID

17

fd_pathRel

varchar

255

 

 

 

 

相对路径。基于顶级节点。root\\child\\self

 

14.2. Oracle

表名:UP6_FOLDERS

序号

列名

数据类型

长度

小数位

标识

主键

允许空

默认值

说明

1

FD_ID

NUMBER

 

 

 

 

文件夹ID

2

FD_NAME

VARCHAR2

50

 

 

 

''   --

 

文件夹名称

3

FD_PID

NUMBER

 

 

 

 

'0'   --

 

父级ID

4

FD_UID

NUMBER

 

 

 

 

'0'   --

 

用户ID

5

FD_LENGTH

NUMBER

19

 

 

 

'' --

 

数字化的大小。以字节为单位,示例:1023254

6

FD_SIZE

VARCHAR2

10

 

 

 

'' --

 

格式化的大小。示例:10G

7

FD_PATHLOC

VARCHAR2

512

 

 

 

''  --

 

文件夹在客户端的路径

8

FD_PATHSVR

VARCHAR2

512

 

 

 

'' 

 

文件夹在服务端的路径

9

FD_FOLDERS

NUMBER

 

 

 

 

'0' 

 

文件夹数

10

FD_FILES

NUMBER

 

 

 

 

'0' 

 

文件数

11

FD_FILESCOMPLETE

NUMBER

 

 

 

 

'0' 

 

已上传完的文件数。

12

FD_COMPLETE

NUMBER

1

0

 

 

'0' 

 

是否已上传完毕

13

FD_DELETE

NUMBER

1

0

 

 

'0' 

 

是否已删除

14

FD_JSON

VARCHAR2

4000

 

 

 

'' 

 

文件夹的JSON数据格式。

15

TIMEUPLOAD

DATE

7

 

 

 

sysdate  

 

上传时间

16

FD_PIDROOT

NUMBER

 

 

 

 

'0'

 

跟级ID

17

FD_PATHREL

VARCHAR2

255

 

 

 

''

 

相对路径。基于顶级节点。root\\child\\self

 

表名:UP6_FILES

序号

列名

数据类型

长度

小数位

标识

主键

允许空

默认值

说明

1

F_IDSVR

NUMBER

 

 

 

 

 

2

F_PID

NUMBER

 

 

 

 

'0' 

 

父级文件夹ID

3

F_PIDROOT

NUMBER

 

 

 

 

'0' 

 

根级文件夹ID

4

F_FDTASK

NUMBER

1

0

 

 

'0'

 

表示是否是一个文件夹上传任务

5

F_FDID

NUMBER

 

 

 

 

'0' 

 

文件夹详细ID,与xdb_folders.fd_id对应。

6

F_FDCHILD

NUMBER

 

 

 

 

'0' 

 

是文件夹中的子项。

7

F_UID

NUMBER

 

 

 

 

'0' 

 

用户ID。与第三方系统整合使用。

8

F_NAMELOC

VARCHAR2

255

 

 

 

''

 

文件在本地电脑中的名称。

9

F_NAMESVR

VARCHAR2

255

 

 

 

''

 

文件在服务器中的名称。

10

F_PATHLOC

VARCHAR2

512

 

 

 

''

 

文件在本地电脑中的完整路径。示例:D:\Soft\QQ2012.exe

11

F_PATHSVR

VARCHAR2

512

 

 

 

''

 

文件在服务器中的完整路径。示例:F:\ftp\uer\md5.exe

12

F_PATHREL

VARCHAR2

512

 

 

 

'' 

 

文件在服务器中的相对路径。示例:/www/web/upload/md5.exe

13

F_MD5

VARCHAR2

40

 

 

 

 

文件MD5

14

F_LENLOC

NUMBER

19

 

 

 

'0' 

 

文件总大小。以字节为单位.9,223,372,036,854,775,807 之间的整数

15

F_SIZELOC

VARCHAR2

10

 

 

 

'' 

 

格式化的文件尺寸。示例:10.03MB

16

F_POS

NUMBER

19

 

 

 

'0' 

 

文件续传位置。9,223,372,036,854,775,807 之间的整数

17

F_LENSVR

NUMBER

19

 

 

 

'0' 

 

已上传大小。9,223,372,036,854,775,807 之间的整数

18

F_PERSVR

VARCHAR2

6

 

 

 

'0%' 

 

已上传百分比。示例:10%

19

F_COMPLETE

NUMBER

1

0

 

 

'0' 

 

 

20

F_TIME

DATE

7

 

 

 

sysdate   

 

 

21

F_DELETED

NUMBER

1

0

 

 

'0' 

 

 

 

14.3. SQL Server

表名:up6_files

序号

列名

数据类型

长度

小数位

标识

主键

允许空

默认值

说明

1

f_id

int

4

0

 

 

2

f_pid

int

4

0

 

 

0

父级文件夹ID

3

f_pidRoot

int

4

0

 

 

0

根级文件夹ID

4

f_fdTask

bit

1

0

 

 

0

表示是否是一个文件夹上传任务

5

f_fdID

int

4

0

 

 

0

文件夹详细ID,与xdb_folders.fd_id对应

6

f_fdChild

bit

1

0

 

 

0

是否是文件夹中的子项

7

f_uid

int

4

0

 

 

0

 

8

f_nameLoc

varchar

255

0

 

 

 

文件在本地电脑中的名称。例:QQ.exe

9

f_nameSvr

varchar

255

0

 

 

 

文件在服务器中的名称。一般为文件MD5+扩展名。

10

f_pathLoc

varchar

512

0

 

 

 

文件在本地电脑中的完整路径。

示例:D:\Soft\QQ.exe

 

11

f_pathSvr

varchar

512

0

 

 

 

文件在服务器中的完整路径。

示例:F:\ftp\user1\QQ2012.exe

 

12

f_pathRel

varchar

512

0

 

 

 

文件在服务器中的相对路径。

示例:/www/web/upload/QQ2012.exe

 

13

f_md5

varchar

40

0

 

 

 

文件MD5

14

f_lenLoc

bigint

19

0

 

 

0

文件总长度。以字节为单位

最大值:9,223,372,036,854,775,807

 

15

f_sizeLoc

varchar

10

0

 

 

'0Bytes'

格式化的文件尺寸。示例:10MB

16

f_pos

bigint

19

0

 

 

0

文件续传位置。

最大值:9,223,372,036,854,775,807

 

17

f_lenSvr

bigint

19

0

 

 

0

已上传长度。以字节为单位。

最大值:9,223,372,036,854,775,807

 

18

f_perSvr

varchar

6

0

 

 

'0%'

已上传百分比。示例:10%

19

f_complete

bit

1

0

 

 

0

是否已上传完毕。

20

f_time

datetime

8

3

 

 

getdate

文件上传时间

21

f_deleted

bit

1

0

 

 

0

是否已删除。

 

表名:up6_folders

序号

列名

数据类型

长度

小数位

标识

主键

允许空

默认值

说明

1

fd_id

int

4

0

 

 

 

2

fd_name

varchar

50

0

 

 

 

文件夹名称

3

fd_pid

int

4

0

 

 

0

父级ID

4

fd_uid

int

4

0

 

 

0

用户ID

5

fd_length

bigint

19

0

 

 

0

数字化的大小。以字节为单位。示例:1023652

6

fd_size

varchar

50

0

 

 

 

格式化的大小。示例:10G

7

fd_pathLoc

varchar

255

0

 

 

 

文件夹在客户端的路径

8

fd_pathSvr

varchar

255

0

 

 

 

文件夹在服务端的路径

9

fd_folders

int

4

0

 

 

0

文件夹数

10

fd_files

int

4

0

 

 

0

文件数

11

fd_filesComplete

int

4

0

 

 

0

已上传完的文件数

12

fd_complete

bit

1

0

 

 

0

是否已上传完毕

13

fd_delete

bit

1

0

 

 

0

是否已删除

14

fd_json

varchar

MAX

0

 

 

 

 

15

timeUpload

datetime

8

3

 

 

getdate

上传时间

16

fd_pidRoot

int

4

0

 

 

0

根级ID

17

fd_pathRel

nvarchar

255

0

 

 

 

相对路径。基于顶级节点。root\\child\\self

 

15. 独立文件服务器设计(分布式构架)

HttpUploader6中,可以将用户上传的文件存在一台单独的文件服务器中(FileServer),不需要额外架设FTP服务器。

 

默认单文件上传流程如下:

52c339e4-591e-43ad-826b-fe05acef7b1e

其中f_create.jsp文件负责创建文件信息:文件在服务器中的保存路径,f_post.jsp负责接收控件上传的文件块数据并保存到目标文件中。在改为独立文件服务器后,f_post.jsp需要布署在文件服务器中(FileServer),f_create.jsp需要返回文件在FileServer中的路径。

 

独立存储构架设计:

7657cdcf-f454-4906-b730-da05b9a666eb

环境设置:

File Server存储路径:D:/files

假设用户上传文件a.txt,则f_create.jsp返回FileServer的路径pathSvr=D:/files/a.txtHttpUploader6f_post.jsp发送文件块时会带上pathSvr,告诉f_post.jsp目标文件的位置。这样f_post.jsp就可以将文件块数据保存到指定的位置。

f_create.jsp通过pathSvr告诉f_post.jsp将文件存在哪里。

 

构架图如下:

c0a5573d-34a7-42cb-9386-84e4c422ddfc

 

15.1. 流程说明

FileServer1,FileServer2,FileServer3,FileServer4,FileServerN这些文件服务器的设置最好一致,比如文件夹的设置,硬盘分区等。

 

1.用户从DBServer中获取远程文件路径。f_create.aspx负责返回文件服务器中的存储路径。

2.控件循环向f_post.aspx(存储服务器中的web程序)发送文件块数据,并附带上远程文件路径信息pathSvr

3.FileServer服务器接收文件块数据,并保存到pathSvr指定的位置。

 

注意:f_create.aspx返回的pathSvr是用来告诉FileServer文件保存路径。

 

15.2. 文件布署

处理文件块数据的逻辑在ajax_post.aspx中,所以只需要在FileServer中布署ajax_post.aspx文件即可。

 

15.3. up6.js配置变化

注意:UrlPost(即f_post.jsp)地址要配置成文件服务器的地址。

     this.Config = {

           "EncodeType"         : "GB2312"

         , "Company"            : "荆门泽优软件有限公司"

         , "Version"            : "2,7,88,30955"

         , "License"            : ""//

         , "Authenticate"        : ""//域验证方式:basic,ntlm

         , "AuthName"            : ""//域帐号

         , "AuthPass"            : ""//域密码

         , "CryptoType"         : "md5"//验证方式:md5,sha1,crc

         , "FileFilter"         : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc

         , "FileSizeLimit"       : "0"//自定义允许上传的文件大小,以字节为单位。0表示不限制。字节计算工具:http://www.beesky.com/newsite/bit_byte.htm

         , "FilesLimit"         : "0"//文件选择数限制。0表示不限制

         , "AllowMultiSelect"   : "1"//多选开关。1:开启多选。0:关闭多选

         , "RangeSize"           : "1048576"//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:1MB

         , "Debug"               : false//是否打开调式模式。true,false

         , "LogFile"            : "F:\\log.txt"//日志文件路径。需要先打开调试模式。

         , "InitDir"            : ""//初始化路径。示例:D:\\Soft

         , "AppPath"            : ""//网站虚拟目录名称。子文件夹 web

         //文件夹操作相关

         , "UrlFdCreate"        : "http://localhost:8080/HttpUploader6Oracle/db/fd_create.jsp"

         , "UrlFdComplete"       : "http://localhost:8080/HttpUploader6Oracle/db/fd_complete.jsp"

         , "UrlFdDel"           : "http://localhost:8080/HttpUploader6Oracle/db/fd_del.jsp"

         //文件操作相关

         , "UrlCreate"           : "http://localhost:8080/HttpUploader6Oracle/db/f_create.jsp"

         , "UrlPost"            : "http://FileServer/f_post.jsp"

         , "UrlComplete"        : "http://localhost:8080/HttpUploader6Oracle/db/f_complete.jsp"

         , "UrlList"            : "http://localhost:8080/HttpUploader6Oracle/db/f_list.jsp"

         , "UrlDel"             : "http://localhost:8080/HttpUploader6Oracle/db/f_del.jsp"

 

16. JSP示例

数据库:MySQL

JDK版本:1.6

Tomcat1.6

项目编码:utf-8

项目截图:

da4222d9-4ca1-4009-985e-f7ad71e228a4

 

16.1. 文件列表

文件名称

说明

数据库处理逻辑

DBFile.java

文件数据表操作类

DBFolder.java

文件夹数据表操作类

DbHelper.java

数据库操作封装类

FileInf.java

文件信息类。

FileResumerPart.java

文件块数据处理类

FolderInf.java

文件夹信息类

xdb_files.java

旧的文件信息类

XDebug.java

调试信息输出类

存储逻辑

PathBuilder.java

 

PathMd5Builder.java

 

PathUuidBuilder.java

 

uc_builder.java

 

uc_file_child.java

 

uc_folder.java

 

文件处理逻辑

db/f_complete.jsp

负责更新数据库中文件项的完成状态,将文件项的完成状态设为已完成。

引用位置:在up6.js中的post_complete函数引用。

db/f_create.jsp

负责向数据库中添加一个新的文件项,并将新的文件项信息返回给客户端。

引用位置:在up6.js中的md5_complete函数中引用。

db/f_del.jsp

负责更新数据库中文件项的删除状态,将文件项的删除状态设为已删除。

引用位置:在up6.js中的RemoveFile函数中引用

db/f_list.jsp

JSON格式列出数据库中所有未完成的文件列表

引用位置:在up6.js中的LoadData函数中引用。

db/f_post.jsp

负责接收HTTP断点续传控件上传的文件块数据,并更新数据库中文件项进度信息。

文件夹处理逻辑

db/fd_complete.jsp

负责更新文件夹已完成状态

db/fd_create.jsp

接收客户端的文件夹JSON信息,

服务端创建层级文件夹,

向数据库添加文件信息和文件夹信息

将文件ID和文件夹ID保存到JSON,并返回给客户端

db/fd_create_uuid.jsp

 

db/fd_del.jsp

负责更新文件夹数据表已删除标识。

db/fd_json.jsp

文件夹JSON信息,暂时保留。

db/clear.jsp

清空文件和文件夹表

测试页面

debug/createid.htm

在数据库中创建数据项

debug/del.htm

删除数据

debug/form.htm

表单测试

debug/post.htm

文件上传测试

debug/process.htm

进度功能测试

debug/upload.htm

普通文件上传测试

 

16.2. 业务逻辑

 

文件夹上传

this.addFolderLoc = function (json)

fd_create.jsp

 

16.3. 与现有系统整合-将文件与用户ID对应

主要步骤如下:

1.在引用页面设置HttpUploaderMgr.Fields的值

2.up6.jsmd5_complete方法中增加Fields属性

3.f_create.jsp页面中接收附加信息

 

up6.js文件中有一个Fields属性配置,可通过扩展这个属性的字段向服务器上传特殊标识信息

     "Fields": {"uname": "test","upass": "test","uid":"0","fid":"0"}

 

1.在引用页面可以设置uid的值

<script language="javascript" type="text/javascript">

    var cbMgr = new HttpUploaderMgr();

    cbMgr.Config.Fields["uid"] = 2;//在这里可以设置为当前用户ID的值

//也可以动态添加其它字段

cbMgr.Config.Fields["Category"] = "soft";

 

    $(document).ready(function()

    {

         cbMgr.load_to("FilePanel");

    });

    </script>

 

2.up6.jsmd5_complete方法中增加Fields属性

     this.md5_complete = function (json)

    {

        this.fileSvr.md5 = json.md5;

        this.event.md5Complete(this, json.md5);//biz event

        this.ui.msg.text("MD5计算完毕,开始连接服务器...");

 

        var loc_path = encodeURIComponent(this.fileSvr.pathLoc);

        var loc_len = this.fileSvr.lenLoc;

        var loc_size = this.fileSvr.sizeLoc;

        var param = { md5: json.md5, uid: this.fields.uid, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() };

 

        $.ajax({

            type: "GET"

            , dataType: 'jsonp'

            , jsonp: "callback" //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

            , url: this.Config["UrlCreate"]

            , data: param

            , success: function (sv)

            {

                //debugMsg("md5_complete success");

                _this.svr_create(sv);

            }

            , error: function (req, txt, err)

            {

                alert("向服务器发送MD5信息错误!" + req.responseText);

                _this.ui.msg.text("向服务器发送MD5信息错误");

                _this.ui.btn.del.text("续传");

            }

            , complete: function (req, sta) { req = null; }

        });

    };

3.f_create.jsp中接收附加信息值

String uid = request.getParameter("uid");

posted on 2012-02-17 11:07  荆门泽优软件有限公司  阅读(11446)  评论(1编辑  收藏

导航

统计信息