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

Web文件上传控件开发文档-ASP.NET(C#)

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

保留所有权利

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

产品首页:http://www.ncmem.com/webplug/http-uploader2/index.asp

在线演示:http://www.ncmem.com/products/http-uploader2/index.asp,

开发文档:asp,jsp,php,asp.net,

升级日志:http://www.cnblogs.com/xproer/archive/2011/03/15/1985091.html

资源下载:cab安装包(x86),cab安装包(x64),crx安装包,crx(nat)安装,xpi安装包,exe安装包,开发文档,VC运行库,证书补丁,

示例下载:ASP示例,ASP.NET示例,JSP示例,PHP示例,

联系信箱:1085617561@qq.com

联系QQ1085617561

更新记录:

 

更新时间

描述

2012-05-29

更新JSP文件上传示例代码。

2012-08-30

增加创建文件夹和删除文件示例代码。

2012-09-10

增加验证本地文件是否存在的示例代码,更新创建文件夹示例代码。

2014-03-18

完善正式包布署章节

增加在本地运行DEMO章节

增加在测试服务器中运行DEMO章节

删除测试包布署说明章节。

新增ASP测试章节。

 

1.      在本地运行DEMO

1.1. ASP.NET

注意:Visual Studio中必须要以打开项目方式打开DEMO。通过双击fb6d3496-d539-49b3-aaa4-7ac9f120e18fe44852f8-739e-402b-871c-e2e4b66e4083打开项目。不要以打开网站方式打开DEMO

f7fcee65-076d-48fe-bca5-f4535f06234f

 

e84d0115-c614-42a2-9ed1-bce2202180b1

 

3875f95a-c2fc-4f19-92ae-b80278d9ff74

 

2.      在测试服务器中运行DEMO

说明:如果客户端能够正常访问互联网,则不用在测试服务器中布署控件包。

步骤如下:

1.将控件包(HttpUploader.cab,HttpUploader64.cab)布署在测试服务器中

     HttpUploader.cabIE(x86)浏览器控件安装包。

     HttpUploader64.cabIE(x64)浏览器控件安装包。

2.修改up2.js中的控件包地址。

cecd9b73-bb51-4fa4-806e-7ae0a43aa0cb

 

3.将上传地址改为测试服务器的上传地址。

9321a60b-4335-4947-8147-4fc653b76fb2

 

3.      正式包布署说明

说明:在购买后我们会以邮件方式提供控件包文件。

1.HttpUploader.cab,HttpUploader64.cab,HttpUploader2.xpi,HttpUploader2.crx,HttpUploader2.exe上传到正式服务器中。

     HttpUploader.cabIE(x86)浏览器控件安装包。

     HttpUploader64.cabIE(x64)浏览器控件安装包。

     HttpUploader2.xpiFirefox浏览器控件安装包。

     HttpUploader2.crxChrome浏览器控件安装包。

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

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

 

3.1. 修改版本号

3120dabd-72f5-481a-8125-9a870833c799

 

3.2. 修改IE32控件Clsid

3b2684b1-3c9c-40d4-b8a7-2343c447e376

 

3.3. 修改IE32控件cab包地址

f600c80c-f6b4-440a-9a83-41ce068170c2

 

3.4. 修改IE64控件clsid

cb97d302-3aad-4216-a8db-525377149f42

 

3.5. 修改IE64控件cab包地址

a1865529-3636-4173-a0d1-3edae353dc32

 

3.6. 修改IE32IE64控件ProjID信息

c987a1f2-cdd1-4b1b-b23a-302313d3d1a4

 

3.7. 修改Firefox控件XpiType

d50b0c4e-0cf8-4b59-8ad4-e6eb56dc2baf

 

3.8. 修改Firefox控件xpi包地址

51564cc6-ac7b-4e6a-a519-60286b942904

 

3.9. 修改chrome控件CrxTypeCrxName

bcea4006-b015-473b-b7ee-c9d1e92a5421

 

3.10. 修改Chrome控件crx包地址

158a97b7-e0a9-4826-aaea-14673fc2d6ef

 

3.11. 修改exe包地址

d842e9fa-d9f7-4984-bf34-f7ea90747440

 

 

4.      整合到现有系统中

主要步骤:

1.上传js文件夹,控件包

2.在引用页面添加js引用

3.在引用页面编写控件初始化代码,并设置上传地址。

 

1.上传js文件夹

eede9e05-5d87-48de-9049-1104d725cafb

 

2.在引用页面添加js引用

04a00ffd-8a1c-439b-a2a4-5c503142d084

 

3.编写控件初始化代码

295f4a85-d4e7-4888-b533-1d9472e3797a

 

5.      自动拼接路径

如果域名会经常变动不是固定域名,可以使用自动拼接路径函数InitPath()来简化控件布署。InitPath()函数的主要作用就是帮助开发人员拼接字符串。开发人员也可以根据自已的业务逻辑情况来修改此函数。

以下示例演示如何使用自动拼接路径

修改HttpUploader.js中的路径

     this.Config = {

         "EncodeType"       : "UTF-8"

         ,"CompanyLicensed" :"武汉命运科技有限公司"

         , "FileFilter"     : "*"//文件类型

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

         , "CabPath"        : "HttpUploader/HttpUploader.cab#version=2,4,11,45688"//CAB文件地址。使用自动拼接路径时只写CAB地址的相对路径。

         , "PostUrl"        : "upload.aspx"//文件上传路径,使用自动拼接路径时只写上传地址的相对路径

         , "ClsidDroper"    : "4D2454F8-EB25-465f-B867-C2A3E9F3D4B4"//拖拽控件

         , "ClsidUploader"  : "7AAE6FD3-C2F2-49d5-A790-1103848B3531"//文件上传控件

         , "ClsidPartition" : "6F3EB4AF-FC9C-4570-A686-88B4B427C6FE"//文件选择控件

     };

Load函数中调用InitPath

     //在外部调用。

     this.Load = function()

     {

        this.InitPath();//自动拼接路径

    }

 

在页面引用代码中设置AppPath

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

    var upMgr = new HttpUploaderMgr();

    upMgr.Config["AppPath"] = "/www/";//设置网站目录

     upMgr.Load();

 

     window.onload = function()

     {

         upMgr.Init();

     };

</script>

 

调用InitPath()后,PostUrlCabPath将会被自动拼接成下列字符串

PostUrl = http://www.ncmem.com/upload.aspx

CabPath = http://www.ncmem.com/HttpUploader/HttpUploader.cab#version=2,4,11,45688

 

6.      升级控件

一般情况下,控件升级后HttpUploader.cab会更新,同时版本号也会更新。

主要步骤如下:

1.      重新上传HttpUploader.cab文件。

2.      更新HttpUploader.js中的版本号。

 

6.1. 更新HttpUploader.js中的版本号

Version属性为版本号。

     this.Config = {

         "EncodeType"            : "gb2312"//UTF-8,GB2312。文件名称编码方式,与web.config-requestEncoding配置对应

         , "Version"            : "2,5,53,40765"

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

         , "License"            : ""

         , "Debug"               : false//调试开关

         , "LogFile"            : "C:\\log.txt"//日志文件路径

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

         //字节计算器:http://www.beesky.com/newsite/bit_byte.htm

         //超过10MB建议选择HttpUploader6http://www.ncmem.com/webplug/http-uploader6/index.asp

         , "FileSizeLimit"       : "10485760"//允许上传的文件大小,默认10MB

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

         , "CryptoType"         : "md5"//文件校验方式:md5,crc,sha1

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

         , "Compress"            : ""//是否开启压缩。值:zip,gzip

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

         , "FileFieldName"       : "file"//文件字段名称

         , "Cookie"            : ""//cookie

        , "Authenticate"       : {type:"ntlm",name:"",pass:""}//域环境信息

         , "PostUrl"            : "http://localhost:4854/asp.net/upload.aspx"

        //x86

         , "ClsidDroper"        : "4D2454F8-EB25-465f-B867-C2A3E9F3D4B4"

         , "ClsidPartition"      : "6F3EB4AF-FC9C-4570-A686-88B4B427C6FE"

         , "CabPath"            : "http://www.ncmem.com/download/HttpUploader2/HttpUploader.cab"

         //x64

         , "ClsidDroper64"       : "C9388115-887C-4d64-B175-F8F1AA5437BF"

         , "ClsidPartition64"   : "3AFFCB6D-55ED-4ada-A1EC-D7D87BA29E51"

         , "CabPath64"           : "http://www.ncmem.com/download/HttpUploader2/HttpUploader64.cab"

         //Firefox

         , "XpiType"            : "application/npHttpUp2"

         , "XpiPath"           : "http://www.ncmem.com/download/HttpUploader2/HttpUploader2.xpi"

         //Chrome

         , "CrxName"            : "npHttpUp2"

         , "CrxType"            : "application/npHttpUp2"

         , "CrxPath"           : "http://www.ncmem.com/download/HttpUploader2/HttpUploader2.crx"

         , "ExePath"            : "http://www.ncmem.com/download/HttpUploader2/HttpUploader2.exe"

         //Chrome 45

        , "NatHostName"        : "com.xproer.up2"//

         , "NatPath"            : "http://www.ncmem.com/download/HttpUploader2/HttpUploader2.nat.crx"

         , "ExePath"            : "http://www.ncmem.com/download/HttpUploader2/HttpUploader2.exe"

     };

 

说明:

更新版本号后,IE会自动提示用户安装最新的控件。

 

7.      用户接口

7.1. 配置上传地址

方法1:在引用页面设置上传地址

00aff873-2b2c-43a3-aabf-2162d2db0b8e

 

方法2:在up2.js中设置上传地址。

4cfc20eb-6308-4a2d-ae3c-f1a87a61e3c9

 

注意:如果同时在引用页面和up2.js中配置了上传地址,那么引用页面的设置将会覆盖up2.js中的设置,即只有引用页面的设置有效。

 

7.2. 设置服务器编码方式

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

var fileMgr = new HttpUploaderMgr();

fileMgr.Config["EncodeType"] = "GB2312";//设置上传编码。必须与网站配置相同。建议在HttpUploader.js中设置,这样可以在多个页面引用,而不需要再次设置。

 

$(document).ready(function ()

{

fileMgr.Load();

});

</script>

 

7.2.1. asp.net

38a80a51-f249-488e-9f34-86e4977cd60d

 

 

7.3. 设置文件类型

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

var fileMgr = new HttpUploaderMgr();

//设置允许上传的文件类型,使用英文逗号分(,)隔。如果允许所有的文件类型,则使用*

fileMgr.Config["FileFilter"] = "jpg,png,bmp,gif,doc,pdf,txt";

 

$(document).ready(function ()

{

fileMgr.Load();

});

</script>

 

7.4. 设置附加信息

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

客户端:

fileMgr.Fields["UserName"] = "test";

服务端:

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

 

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

客户端:

fileMgr.Fields["f1"] = "f1";

fileMgr.Fields["f2"] = "f2";

fileMgr.Fields["f3"] = "f3";

fileMgr.Fields["f4"] = "f4";

fileMgr.Fields["f5"] = "f5";

服务端(ASP.NET)

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

string f1 = Request.Form["f2"];

string f1 = Request.Form["f3"];

string f1 = Request.Form["f4"];

string f1 = Request.Form["f5"];

 

7.5. 上传本地文件

使用步骤如下:

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

<div id="upPnl"></div>

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

    var fileMgr = new HttpUploaderMgr();

 

     $(document).ready(function ()

     {

         fileMgr.Load();

         fileMgr.postLoc("D:\\360safe-inst.exe", "upPnl");

     });

 

</script>

 

7.6. 以压缩模式(zlib)上传

说明:开启压缩后,控件上传前会对文件进行zlib压缩操作,服务端接收到的数据需要进行解压操作。压缩后传输的数据量变小,可以有效的降低网络流量从而提高上传效率。此功能特别适合企业级文件传输环境。

cc0e6e78-667b-47f7-963b-8e16d576d269

 

7.7. gzip压缩模式上传

配置方法:

9d577491-cf64-4ae1-97fe-86292692a02b

压缩效果对比:

1.txt文件进行测试

原文件大小:91.7kb

提交数据:

66768ef2-c926-4bfc-bddb-7ee2c0e7e3ba

gzip压缩模式:

压缩后:0.796kb

55c74343-0bd1-4c70-a637-a14072826a8c

 

2.exe文件进行测试

原文件大小:1049kb

提交数据:

b327aba5-7d34-456f-846b-b577a76317b7

gzip压缩模式:

压缩后:684.820kb

636caa38-0a55-4010-8d7e-4a0eaa895416

 

8.      UI模板

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

 

HTML:

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

     <div class="UploaderItemLeft">

         <div class="FileInfo">

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

              <div name="fileSize" class="FileSize" child="1">100.23MB</div>

         </div>

         <div class="ProcessBorder top-space"><div name="process" class="Process"></div></div>

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

     </div>

     <div class="UploaderItemRight">

         <div class="BtnInfo"><span name="btnCancel" class="Btn">取消</span>&nbsp;<span name="btnDel" class="Btn hide">删除</span></div>

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

     </div>

</div>

 

9.  服务端支持 

9.1. ASP.NET(C#)

开发语言:ASP.NET(C#)

.NET框架:2.0

 

说明:HttpUploader控件是使用标准HTTP FORM方式上传的,所以在使用其它WEB语言时使用相应的HTTP FORM方式处理接受文件即可以。并不限制WEB开发语言。

 

9.1.1. web.config配置文件

说明:如果需要上传大文件,则需要修改httpRuntime中的maxRequestLength属性值。同时还需要修改executionTimeout值。

requestEncoding值和控件的编码必须保持一致,否则服务器接受上传文件名称会出现乱码。

 

<system.web>

         <!--最大上传4GB-->

        <httpRuntime maxRequestLength="2097151" executionTimeout="3600" />

         <!这里根据实际情况来设置服务器的编码,客户端的编码设置必须与此处保持一致-->

        <globalization requestEncoding="utf-8" responseEncoding="utf-8"/>

        <!--<globalization requestEncoding="gb2312" responseEncoding="gb2312"/>-->

  </system.web>

 

 

9.1.2. upload.aspx代码

ASP.NET(C#)

using System;

using System.Web;

using System.IO;

using Ionic.Zlib;

 

namespace HttpUploader2

{

    public partial class upload : System.Web.UI.Page

     {

         protected void Page_Load(object sender, EventArgs e)

         {

              string v = Request.Form["UserName"];

              string compress = Request.Form["Compress"];//压缩模式。zip,gzip

              System.Diagnostics.Debug.WriteLine(v);

 

              if (Request.Files.Count > 0)

              {

                   string folder = Server.MapPath("/upload");

                   //自动创建上传文件夹

                   if (!Directory.Exists(folder)) Directory.CreateDirectory(folder);

 

                   HttpPostedFile file = Request.Files.Get(0);

                   //获取纯文件名称:qq.exe

                   string nameSvr = file.FileName;

                   string ext = Path.GetExtension(nameSvr).ToLower();

                   //只保存图片

                   if (ext == ".asp"

                       || ext == ".aspx"

                       || ext == ".php")

                   {

                       return;

                   }

                   //合并路径

                   string pathSvr = Path.Combine(folder, nameSvr);

                   if (compress == "zip")

                   {

                       this.saveZipData(ref file, pathSvr);

                   }

                   else if(compress == "gzip")

                   {

                       this.saveGzipData(ref file, pathSvr);

                   }//保存到服务器                 

                   else file.SaveAs(pathSvr);

 

                   Response.Write(nameSvr);

              }

         }

 

        void saveZipData(ref HttpPostedFile file,string pathSvr)

        {

            //控件发送的文件数据是经过zlib压缩的,所以需要使用zlib解压

            using (ZlibStream zs = new ZlibStream(file.InputStream, CompressionMode.Decompress, false))

            {

                byte[] buffer = new byte[1024];

                int n = 0;

                MemoryStream ms = new MemoryStream();

                while ((n = zs.Read(buffer, 0, buffer.Length)) != 0)

                {

                    ms.Write(buffer, 0, n);

                }

                FileStream fs = new FileStream(pathSvr, FileMode.Create);

                ms.WriteTo(fs);

                fs.Close();

                ms.Close();

            }

        }

 

        void saveGzipData(ref HttpPostedFile file, string pathSvr)

        {

            //控件发送的文件数据是经过zlib压缩的,所以需要使用zlib解压

            using (GZipStream zs = new GZipStream(file.InputStream, CompressionMode.Decompress, false))

            {

                byte[] buffer = new byte[1024];

                int n = 0;

                MemoryStream ms = new MemoryStream();

                while ((n = zs.Read(buffer, 0, buffer.Length)) != 0)

                {

                    ms.Write(buffer, 0, n);

                }

                FileStream fs = new FileStream(pathSvr, FileMode.Create);

                ms.WriteTo(fs);

                fs.Close();

                ms.Close();

            }

        }

     }

}

posted on 2011-03-15 15:36  荆门泽优软件有限公司  阅读(3563)  评论(2编辑  收藏

导航