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

Web大文件下载控件-开发文档-Xproer.HttpDownloader

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

保留所有权利

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

产品首页：http://www.ncmem.com/webapp/down2/index.asp

在线演示：http://www.ncmem.com/products/down2/index.html

产品介绍：http://www.cnblogs.com/xproer/archive/2011/03/26/1996322.html

开发文档：http://www.cnblogs.com/xproer/archive/2011/03/26/1996371.html

升级日志：http://www.cnblogs.com/xproer/archive/2011/03/26/1996330.html

资源下载：cab安装包(x86)，cab安装包(x64)，xpi安装包，crx安装包，crx(nat)安装包，exe安装包，开发文档，VC运行库

示例下载(.NET)：Sql2005示例

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

示例下载(PHP)：MySQL示例

联系信箱：1085617561@qq.com

联系QQ：1085617561

 

1.      在本地测试DEMO

1.1.   jsp示例

oracle-MyEclipse

 

工程截图：

eb1be35b-4478-40f4-8554-38548a27eac6

 

1.创建数据表

aa361ae9-1af1-42ca-bd2a-c2879268275c

2.修改数据库连接信息

c836987a-e563-44f7-95ef-adac2a5107f3

 

3.修改上传地址

d540c700-5dad-442f-bd26-371b9ae141bf

4.修改downloader地址

8eda4089-b246-424b-9dcf-2a11658b145e

 

oracle-Eclipse

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

1.将tomcat 6.x与eclipse关联

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

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

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

src/Xproer

src/Xproer.biz

src/Xproer.down2.biz

src/Xproer.down2.model

src/Xproer.uncomplete

WebRoot/db

WebRoot/down2

WebRoot/js

WebRoot/sql

WebRoot/index.htm

WebRoot/WEB-INF/lib

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

 

 

mysql-MyEclipse

工程截图：

d2495eb1-1774-43bd-87c5-0d4913f0d632

1.创建数据库

eaa68782-b08d-4a4f-9d46-a3384d083680

 

2.修改数据库连接信息

1d35e101-5617-4371-aad9-b0cbee743e6b

 

3.修改上传地址

b34c19cd-084a-4c51-b5f4-9948a17a3a2e

 

4.修改downloader地址

6d1d341a-db4d-442d-a620-163ef634443a

mysql-Eclipse

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

1.将tomcat 6.x与eclipse关联

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

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

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

src/Xproer

src/Xproer.biz

src/Xproer.down2.biz

src/Xproer.down2.model

src/Xproer.uncomplete

WebRoot/db

WebRoot/down2

WebRoot/js

WebRoot/sql

WebRoot/index.htm

WebRoot/WEB-INF/lib

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

 

2.      整合到现有系统中

 

2.1.   jsp

 

2.1.1.    复制文件

需要复制的数据如下：

src/Xproer

WebRoot/db

WebRoot/js

WebROOT/index.html

6e1e5a2d-1761-4a0d-902c-ccbab1f3d607

 

2.1.2.    修改配置

修改数据库配置DbHelper.java

修改down.js中的配置

修改服务器地址

修改控件包地址

 

2.2.   php

 

2.2.1.    复制文件

d40284ab-ef0a-4401-878e-84a6f8b008a2

 

 

2.2.2.    修改配置

1.修改DbHelper.php中的配置

修改数据库配置

2.修改down.js中的配置

修改服务地址

修改控件包地址

 

2.3.   asp.net

 

2.3.1.    复制文件

需要复制的文件和文件夹如下：

db

js

index.html

3546936c-aef1-4134-a111-481e58afed12

 

注意：由于demo中的aspx文件的命名空间和项目不同，所以复制到项目后需要修改所有cs和aspx的命名空间

demo中的代码文件命名空间如下：

52cc084e-16e9-4983-86a5-0ec3cc3a2ddb

2865ac1b-5fd9-4c11-9036-a075c1f75b95

 

2.3.2.    修改配置

1.修改数据库配置

DbHelper.cs

2.修改down.js中的地址

修改控件包下载地址

修改服务器地址

 

2.4.   在页面中引用

1.添加头文件

2.添加引用代码

 

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

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

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

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

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

在<body></body>标签中间添加下列代码：

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

        var downer = new DownloaderMgr();

        downer.Config["Folder"] = "F:\\ftp\\";//设置默认下载路径。

        //下载事件

        downer.event.downComplete = function (obj) { $(document.body).append('<div>本地路径：'+obj.fileSvr.pathLoc+'</div>'); };

        downer.event.downError = function (obj, err) { };

        downer.event.queueComplete = function () { $(document.body).append("<div>队列完成</div>"); };

 

    $(document).ready(function ()

    {

        downer.loadTo("downDiv");//加载控件，加载操作界面

    });

    

     function StartDown()

     {

         downer.add_file("http://down.sandai.net/thunder7/Thunder_dl_7.9.6.4502.exe"/*,自定义名称.exe*/);

         //downer.add_file("http://www.lingoes.cn/download/lingoes_2.9.1_cn.exe");

         //downer.add_file("http://www.ncmem.com/images/ico-ftp.jpg");

         // downer.add_file("http://www.ncmem.com/images/ico-up.jpg");

         //downer.add_file("http://localhost:1105/db/down.aspx", "test.jpg");

         //downer.add_file("http://localhost:1106/db/down.aspx");

         //downer.add_file("http://www.ncmem.com/images/ico-capture.jpg");

         //downer.add_file("http://www.ncmem.com/images/ico-imageuploader.gif");

         //downer.add_file("http://www.ncmem.com/images/ico-wordpaster.gif");

         downer.start_queue();//下载队列

     }

    

</script>

 

 

3.      测试包布署说明

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

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

1.将down2.cab上传到测试服务器中。

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

868fa92c-5519-4c7f-bc6c-024e78aa7193

 

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

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

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

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

225d256f-1a8d-48d8-9d4c-8bdf01694c0c

 

 

4.      正式包布署说明

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

1.将down2.cab,down64.cab,down2.xpi,down2.crx,down2.nat.crx,down2.exe上传到正式服务器中。

     down2.cab为IE(x86)浏览器插件安装包。

     down64.cab为IE(x64)浏览器插件安装包。

     down2.crx为Chrome浏览器插件安装包。

     down2.nat.crx为Chrome 45+浏览器插件安装包。

     down2.xpi为Firefox浏览器插件安装包。

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

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

将版本号改为最新。

afd79817-2d5d-4952-bb33-da0a1d9b3576

 

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

1.修改控件包地址

225d256f-1a8d-48d8-9d4c-8bdf01694c0c

 

2.修改控件信息

3877c252-6d41-4000-80f6-e9ed615e70ce

 

3.修改ActiveX信息

346dab10-f086-457d-b313-4ab15932ca45

 

5.      用户接口

 

5.1.   并发数

数字越大表示同时下载的文件越多，比如设为3则同时有3个线程开始下载。

1638194c-caa7-4d62-a3da-c6f046500150

 

5.2.   文件块

文件块的作用是更新文件进度频率。比如设置为1MB，则控件每下载1MB时将会触发down_part事件，一般在此事件中更新服务器下载进度。

38e374c7-67bc-4a7c-ab07-bbf7c7326481

 

5.3.   调试模式

1.将Debug改为true

2.为LogFile填写日志文件路径

791bbae6-7d53-4700-8f75-69b9cd78f2b1

 

5.4.   事件

51728066-c04a-42f6-ba19-dae4299bded6

 

5.4.1.    下载完毕

每个文件下载完毕都会触发downComplete事件，可以在引用页面挂载这个事件

e4db3600-a91b-447e-b404-f3ff6741b220

 

 

5.4.2.    下载错误

每个文件下载错误都会触发此事件。

 

5.4.3.    队列完成

队列下载完毕会触发事件：queueComplete

注意：因为目前的下载队列是可以在下载过程中添加文件，所以当前队列下载完毕后此事件会触发一次，如果再次添加文件下载完毕则此事件会再触发一次。

 

6.      流程说明

 

6.1.   单文件下载流程

a54c6815-ec59-453f-ac38-59cd78659a52

 

6.2.   文件夹下载流程

465bd5ce-ff74-4cd8-b8f9-a6ac1de12c1e

说明：fd_json.jsp以JSON格式返回文件夹数据。

{files:{file1,file2,file3},length,ids:"未下载完的文件ID列表"}

 

7.      文件下载权限控制

DEMO中文件下载的逻辑由f_down.jsp实现。如果需要对用户下载进行权限控制，可以通过修改f_down.jsp的代码来实现。

 

8.      UI模板

您可以根据实际需求来修改以下模板。

 

HTML:

<div class="UploaderItem" id="UploaderTemplate">

     <div class="UploaderItemLeft">

         <div class="FileName top-space">HttpUploader程序开发.pdf</div>

         <div class="ProcessBorder top-space">

              <div class="Process"></div>

         </div>

         <div class="PostInf top-space">已上传:15.3MB 速度:20KB/S 剩余时间:10:02:00</div>

     </div>

     <div class="UploaderItemRight">

         <a class="Btn" href="javascript:void(0)">取消</a>

         <div class="ProcessNum">35%</div>

     </div>

</div>

 

9.      相关示例

 

9.1.   如何在页面中不显示下载界面

下面界面样式主要由CSS控制，只需要通过修改CSS就可以达到此效果。

 

1.将UploaderPanel样式设为隐藏

html代码如下：

4b84e591-c3c1-42f6-943d-08b6ebfc1e83

css代码如下：

5df6c0fd-3f5a-4570-bd0c-5d7e4c5bdd17

 

2.添加下载项时，取消显示下载项。目前是设置为显示，因为CSS中定义的默认样式就是隐藏

css样式代码如下：

9cbd8dc1-06d0-4993-96f9-a1bb4a1084cd

js代码如下：

7df172f4-a457-49f3-846f-2d5af4c09589

 

修改后的代码：

5f648e87-0aa1-4054-82d1-43b882151869

posted on 2011-03-26 16:17  荆门泽优软件有限公司  阅读(3050)  评论(0)  编辑  收藏

导航

统计信息