HTTP断点续传控件-ASP.NET开发文档-Xproer.HttpUploader3
2012-11-22 17:23
465 查看
版权所有 2009-2012 武汉命运科技有限公司
保留所有权利
官方网站:http://www.ncmem.com/
产品首页:http://www.ncmem.com/webplug/http-uploader3/index.aspx
在线演示:http://www.ncmem.com/products/http-uploader3/demo/index.html
产品介绍:/article/5268169.html
开发文档-ASP:/article/5268171.html
开发文档-PHP:/content/4199730.html
开发文档-JSP:/content/4199729.html
开发文档-ASP.NET:/content/4199731.html
升级日志:/article/5268170.html
资源下载:cab安装包,开发文档
示例下载(.NET):ACCESS示例(GB2312)
示例下载(JSP):JSP-ACCESS示例(GB2312),JSP-ACCESS示例(UTF-8),JSP-Sql2005示例(UTF-8),JSP-MySQL示例(UTF-8)
示例下载(JSP-WebLogic环境):ACCESS示例(GB2312),ACCESS示例(UTF-8)
示例下载(PHP):MySQL示例(UTF-8)
问题反馈:http://www.ncmem.com/bbs/showforum-4.aspx
VC运行库:http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=29
联系信箱:1085617561@qq.com
联系QQ:1085617561
更新记录:
说明:支持文件和文件夹拖拽。如果用户拖拽的是文件夹,则控件将会读取此文件夹下的所有文件,包括所有子文件夹中的文件。
MD5计算进度
MD5计算完毕
上传中
上传完成界面
1.搭建Web服务器。IIS,Apatch, Apache Tomcat 6
2.修改index.html上传地址
上传控件相关文件。一般是整个HttpUploader文件夹
修改cab文件下载地址
修改classid和codebase地址
设置服务器编码
修改文件上传地址
在引用页面调用
asp.net//请根据项目类型上传相应的文件夹,如果是PHP项目则上传PHP文件夹,如果是ASP项目则上传asp文件夹
HttpUploader
说明:
请不要手动解压HttpUploader.cab文件,请将完整的HttpUploader.cab文件上传到服务器中。IE浏览器会自动安装CAB。CAB文件相当于是一个自动安装控件的脚本。
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
修改UrlCreate,UrlPost,UrlProcess,UrlComplete,UrlList,UrlDel。
注意:
Url必须为完整地址,请勿使用相对地址。
UrlCreate = http://www.ncmem.com/upload.aspx//正确地址
UrlCreate = /upload.aspx//错误地址
如果希望使用相对地址,请参考自动拼接路径章节
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
this.ActiveX = {
"Uploader" : "Xproer.HttpUploader4"//这里的Xproer要改为单独生成的名称。
, "Partition" : "Xproer.HttpPartition4"//这里的Xproer要改为单独生成的名称。
};
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
说明:
为了避免与其它公司的控件产生冲突,每个控件的classid值都不相同。在购买产品后,我们会为每个公司单独生成序列号。
当控件升级(版本号变化)或CAB文件地址更改,必须修改codebase的地址。否则用户的IE浏览器将无法正常加载控件。
请确保codebase的地址与示例中的地址一致,version字符不能丢失,版本号中间不能有空格。
如果公司名称是QQ,则ActiveX的ProjID如下:
QQ.HttpUploader
QQ.HttpPartition
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
修改EncodeType的值。EncodeType为文件上传页面的编码,此编码必须与网站保持一致。因为Http文件上传控件会根据此编码类型来对中文文件名称进行编码处理。示例如下:
如果网站的编码是GB2312,EncodeType = "GB2312"
如果网站的编码是UTF-8,EncodeType = "UTF-8"
2.添加引用代码
在<head></head>标签中间添加下列代码
<link href="css/HttpUploader.css" type="text/css" rel="Stylesheet"/>
<script type="text/javascript" src="js/FileLister.js"></script>
<script type="text/javascript" src="js/HttpUploader.js"></script>
<script type="text/javascript" src="js/combinbox.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
var cbItemLast = null;
var cbMgr = new CombinBoxMgr();
$(document).ready(function()
{
cbMgr.LoadInControl("FilePanel");//在指定的DIV中加截控件
cbMgr.Init();
});
</script>
在<body></body>标签中间的适当位置添加下列代码:
<div id="FilePanel"></div>
以下示例演示如何使用自动拼接路径
修改combinbox.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 imgUploader = new ImageUploader();
imgUploader.Config["AppPath"] = "/www/";//设置网站目录
imgUploader.Load();
window.onload = function()
{
imgUploader.Init();
};
</script>
调用InitPath()后,PostUrl和CabPath将会被自动拼接成下列字符串
PostUrl = http://www.ncmem.com/upload.aspx
CabPath = http://www.ncmem.com/HttpUploader/HttpUploader.cab#version=2,4,11,45688
主要步骤如下:
1.重新上传HttpUploader.cab文件
2.修改HttpUploader.js中的控件版本号。
请找到类似以下代码后,修改version后面的版本号。
this.Config = {
"EncodeType" : "UTF-8"
,"CompanyLicensed" :"武汉命运科技有限公司"//请勿修改此处授权名称,如果需要修改请与我们联系。
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,png,gif,bmp
, "AllowMultiSelect": 0//多选开关。1:开启多选。0:关闭多选
, "AppPath" : ""//网站虚拟目录名称。子文件夹 web
, "CabPath" : "http://www.ncmem.com/httpUploader/HttpUploader.cab#version=2,4,11,45688"//CAB文件地址
, "PostUrl" : "http://localhost:1591/asp.net/upload.aspx"//文件上传路径
, "ClsidDroper" : "4D2454F8-EB25-465f-B867-C2A3E9F3D4B4"//拖拽控件
, "ClsidUploader" : "7AAE6FD3-C2F2-49d5-A790-1103848B3531"//文件上传控件
, "ClsidPartition" : "6F3EB4AF-FC9C-4570-A686-88B4B427C6FE"//文件选择控件
};
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
this.Config = {
"EncodeType" : "GB2312"//设置上传编码。必须与网站配置相同。建议在HttpUploader.js中设置,这样可以在多个页面引用,而不需要再次设置。
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
假设我们设置允许上传的文件类型为jpg,bmp,png,gif,则效果图如下:
允许上传的文件大小一般都在combinbox.js文件中配置
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
文件块大小一般都在combinbox.js文件中配置。
一般情况下推荐设置为128KB,这是为了保证在网络环境不稳定的情况下,控件能够正常上传。如果用户的网络环境比较稳定,可适当调大这个值。
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
客户端:
uploaderMgr.Fields["UserName"] = "test";
服务端:
string fname = Request.Form["UserName"];
开发人员可以根据自已的业务需求来扩展附加信息:
客户端:
uploaderMgr.Fields["f1"] = "f1";
uploaderMgr.Fields["f2"] = "f2";
uploaderMgr.Fields["f3"] = "f3";
uploaderMgr.Fields["f4"] = "f4";
uploaderMgr.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"];
1.调用AddFile函数添加本地文件,注意路径需要使用双斜框(\\)
2.调用PostFirst函数开始上传文件。
<script type="text/javascript" language="javascript">
var uploaderMgr = new HttpUploaderMgr();
uploaderMgr.Load();//加载控件
uploaderMgr.AddFile("D:\\Soft\\QQ2010.exe");
uploaderMgr.PostFirst();
</script>
如果开发人员希望用户关闭IE后再次打开IE时,用户仍然能够继续上传关闭IE前未上传完成的文件,开发人员应该将上面的相关信息保存在数据库中。在打开页面时从数据库读取数据然后调用AddResumeFile方法,添加需要续传的文件。
以下示例演示从100字节的位置开始续传QQ2010.exe文件
<script type="text/javascript" language="javascript">
var uploaderMgr = new HttpUploaderMgr();
uploaderMgr.Load();//加载控件
//添加续传文件
uploaderMgr.AddResumeFile("D:\\Soft\\QQ2010.exe","100","10%");
uploaderMgr.PostFirst();
</script>
5.1. IIS的设置
开启保持HTTP连接
1. JavaScript对象
1.1. HttpUploader对象
类型:JavaScript
文件上传对象的包装类,用户在实际的项目中只需要创建HttpUploader对象,然后通过HttpUploader对象就可以进行文件上传操作。
语法:
JavaScript(声明)
function HttpUploader() { }
方法
Ready方法
将上传任务状态设置为准备状态。
Post方法
开始上传文件。
说明:此函数将会自动实现断点续传功能。如果当前任务文件只上传了一半,则在下次开始时XSUploader组件将会自动定位到上次上传的位置继续上传数据。
Stop方法
停止上传任务。
PostNext方法
继续上传队列中下一个任务。
属性
1.2. HttpUploaderMgr对象
类型:JavaScript
上传文件管理类。
方法
AddFile方法
添加一个文件到上传对列中
语法:
void AddFile(fid);
参数:
fid
新上传任务的唯一文件ID,此ID用来区域不同的上传任务。
AddFeidl方法
AddResumeFile方法
添加一个续传文件。
语法:
this.AddResumeFile = function(filePath, postedLength, postedPercent, md5)
参数:
filePath
包含本地文件路径的文件名称。示例:D:\\Soft\\QQ2010.exe
postedLength
已上传文件大小(以字节为单位),即续传起点。示例:10020
说明:此值一般保存在数据库中。在页面加载时可从数据库读取此值然后传给控件。
postedPercent
已上传百分比。示例:50%
md5
文件MD5。一般从服务器读取。
PostFirst方法
开始上传队列中的第一个文件。
语法:
void PostFirst()
Exist方法
检查上传队列中是否存在指定文件。
说明:此函数是根据本地文件的完整路径来检测的。
bool Exist();
返回值:
true
表示存在。
false
不存在。
SetFileFilter方法
设置过滤的文件类型。
语法:
void SetFileFilter(filter)
参数:
filter 文件类型字符串。由逗号分隔。示例:exe,jpg,php
属性
Fields属性
上传时附加的额外信息。
注意:此属性暂时不支持中文字符串。
以下示例演示上传时添加用户名和密码的额外信息:
[align=left]var uploaderMgr = new HttpUploaderMgr();[/align]
[align=left]uploaderMgr.Fields["UserName"] = "test";[/align]
uploaderMgr.Fields["UserPass"] = "test";
Config属性
提供全局配置信息。
语法:
[align=left] this.Config = {[/align]
[align=left] "EncodeType": "UTF-8"[/align]
[align=left] ,"CompanyLicensed":"北京新颖网络"[/align]
[align=left] , "FileFilter": "*"//文件类型[/align]
[align=left] , "AppPath": ""//网站虚拟目录名称。子文件夹 web[/align]
[align=left] , "CabPath": "/products/http-uploader/demo2/HttpUploader.cab#version=2,4,11,45688"[/align]
[align=left] , "PostUrl": "/asp.net/upload.aspx"[/align]
[align=left] , "ClsidDroper": "4D2454F8-EB25-465f-B867-C2A3E9F3D4B4"[/align]
[align=left] , "ClsidUploader": "7AAE6FD3-C2F2-49d5-A790-1103848B3531"[/align]
[align=left] , "ClsidPartition": "6F3EB4AF-FC9C-4570-A686-88B4B427C6FE"[/align]
};
EncodeType值
服务器编码方式。
此属性必须和web.config配置文件对应。
如果服务器端编码方式是UTF-8
<globalizationrequestEncoding="utf-8"responseEncoding="utf-8"/>
则客户端也必须是UTF-8
[align=left]var uploaderMgr = new HttpUploaderMgr();[/align]
uploaderMgr.Config["EncodeType"] = "UTF-8";
如果服务端编码方式是GB2312
<globalizationrequestEncoding="gb2312"responseEncoding="gb2312"/>
则客户端也必须是GB2312
[align=left]var uploaderMgr = new HttpUploaderMgr();[/align]
uploaderMgr.Config["EncodeType"] = "GB2312";
PostUrl值
接收处理上传文件的URL。
2. ActiveX对象
2.1. Xproer.HttpDroper对象
CLSID:7193B258-CA68-4eee-A64A-43C7E3BD1857
类型:ActiveX
文件拖放面板,为用户提供文件的拖放功能。
事件
OnFileDrop事件
文件拖放事件。当用户从资源管理器向拖放面板中拖放文件时此事件将会自动被调用。
示例
[align=left]<HTML>[/align]
[align=left]<HEAD>[/align]
[align=left]<TITLE>New Page</TITLE>[/align]
[align=left]</HEAD>[/align]
[align=left]<BODY>[/align]
[align=left] [/align]
[align=left]<OBJECT ID="FilePanel1" WIDTH=192 HEIGHT=192 CLASSID="clsid: AF145FF6-EF91-4C91-BD85-D4ECCA224D27" DATA="DATA:application/x-oleobject;BASE64,P0yJ/coEwUiWnGww8Tau4AADAADYEwAA2BMAAA==">[/align]
[align=left]</OBJECT>[/align]
[align=left]<div id="divFileLister"></div>[/align]
[align=left]<script language="javascript" type="text/javascript">[/align]
[align=left] var obj = document.getElementById("FilePanel1");[/align]
[align=left] obj.OnFileDrop = EventFileDrop;[/align]
[align=left] function EventFileDrop()[/align]
[align=left] {[/align]
[align=left] var lister = document.getElementById("divFileLister");[/align]
[align=left] var list = obj.GetSelectedFiles();//获取选择的文件[/align]
[align=left] for (var index = list.lbound(1); index <= list.ubound(1); ++index)[/align]
[align=left] {[/align]
[align=left] lister.innerHTML += "<p>文件名:" + list.getItem(index) + "</p>";[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left]</script>[/align]
[align=left]</BODY>[/align]
</HTML>
2.2. Xproer.HttpPartition对象
CLSID:BC5E2E5D-49E2-4d34-A606-902640DB92AC
类型:ActiveX
多文件选择对象。弹出一个文件选择对话框,为用户提供选择多个文件的功能。
方法
GetSelectedFiles方法
获取用户选择的文件列表数组。
属性
示例
下面的代码示例将会创建一个文件选择框,并弹出用户所选择的文件名称。
JavaScript:
[align=left]<script type="text/javascript" language="javascript">[/align]
[align=left] function ShowSelectFileDlg()[/align]
[align=left] {[/align]
[align=left] var manager = new HttpUploaderMgr();[/align]
[align=left] var obj = new ActiveXObject(manager.ActiveX["Partition"]);;//创建文件选择对话框[/align]
[align=left] [/align]
[align=left] if (!obj.ShowDialog()) return;[/align]
[align=left] var list = obj.GetSelectedFiles();//获取用户选择的文件[/align]
[align=left] if (list == null) return;[/align]
[align=left] if (list.lbound(1) == null) return;[/align]
[align=left] [/align]
[align=left] for (var index = list.lbound(1); index <= list.ubound(1); index++)[/align]
[align=left] {[/align]
[align=left] if (!manager.Exist(list.getItem(index)))[/align]
[align=left] {[/align]
[align=left] manager.AddFile(list.getItem(index));[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] manager.PostFirst();[/align]
[align=left] }[/align]
[align=left]</script>[/align]
2.3. Xproer.HttpUploader对象
CLSID:33A128F3-9CA3-4a7f-A1FE-1DB6BF5156AA
类型:ActiveX
HTTP文件上传对象,负责文件具体的上传和续传工作。
属性
事件
OnComplete事件
传输完成事件,当文件成功上传完毕后,系统将会调用此方法
参数:
arguments[0]
文件ID。
OnPost事件
传输数据事件。每当HttpUploader插件成功向服务器传输二进制数据后将触发此事件。
参数:
obj
HttpUploader JS对象
speed
传输速度
postedLength
已上传字节
percent
已上传百分比。
time
剩余完成时间
OnStop事件
传输停止事件,当上传任务停止时系统将会自动调用此方法
参数:
arguments[0]
文件ID。
OnError事件
传输错误事件,当传输出现错误时系统将会自动调用此事件。
参数:
arguments[0]
文件ID。
arguments[1]
错误码
示例
下面的代码将会创建一个上传项,并将本地C盘下的myfile.txt文件上传到服务端,并以myfile.txt保存。
JavaScript
[align=left]var upFile = new FileUploader(1);//这里创建了一个文件上传任务,并将文件ID设置为1[/align]
[align=left]upFile.ATL.PostUrl = "http://www.ncmem.com/upload.aspx";//设置上传地址[/align]
[align=left]upFile.ATL.LocalFileName = "C:\\myfile.txt";//设置要上传的本地文件[/align]
[align=left]//设置事件,这些事件必须设置,否则上传任务将无法执行[/align]
[align=left]upFile.ATL.OnComplete = function() { }[/align]
[align=left]upFile.ATL.OnPost = function() { }[/align]
[align=left]upFile.ATL.OnStop = function() { }[/align]
[align=left]upFile.ATL.OnError = function() { }[/align]
upFile.Post(); //开始上传
3. UI模板
您可以根据实际需求来修改以下模板。
HTML:
[align=left]<div class="UploaderItem" id="UploaderTemplate">[/align]
[align=left] <div class="UploaderItemLeft">[/align]
[align=left] <div class="FileName top-space">HttpUploader程序开发.pdf</div>[/align]
[align=left] <div class="ProcessBorder top-space">[/align]
[align=left] <div class="Process"></div>[/align]
[align=left] </div>[/align]
[align=left] <div class="PostInf top-space">已上传:15.3MB 速度:20KB/S 剩余时间:10:02:00</div>[/align]
[align=left] </div>[/align]
[align=left] <div class="UploaderItemRight">[/align]
[align=left] <a class="Btn" href="javascript:void(0)">取消</a>[/align]
[align=left] <div class="ProcessNum">35%</div>[/align]
[align=left] </div>[/align]
</div>
4. HTML示例
以下示例将会弹出一个对话框并将用户选定的文件上传到服务器中。
JavaScript:
[align=left]<script type="text/javascript" language="javascript">[/align]
[align=left] function ShowSelectFileDlg()[/align]
[align=left] {[/align]
[align=left] var manager = new HttpUploaderMgr();[/align]
[align=left] var obj = new ActiveXObject(manager.ActiveX["Partition"]);[/align]
[align=left] if (!obj.ShowDialog()) return;//打开选择文件对话框[/align]
[align=left] [/align]
[align=left] var list = obj.GetSelectedFiles();//获取用户选择的文件[/align]
[align=left] if (list == null) return;[/align]
[align=left] if (list.lbound(1) == null) return;[/align]
[align=left] for (var index = list.lbound(1); index <= list.ubound(1); index++)[/align]
[align=left] {[/align]
[align=left] if (!manager.Exist(list.getItem(index)))[/align]
[align=left] {[/align]
[align=left] manager.AddFile(list.getItem(index));[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] manager.PostFirst();[/align]
[align=left] }[/align]
[align=left]</script>[/align]
此示例支持1000G文件的续传操作。
编码:GB2312
主要配置步骤如下:
创建数据库。
修改js/combinbox.js中的配置信息
运行demoAccess/index.htm文件
db文件夹中已自带一个ACCESS数据库文件:db.mdb。此数据库文件可演示2G以下大小的文件断点续传功能。如果希望处理2G以上的文件,需要重建数据表。并将FileLength,FilePos,PostedLength字段类型改为long形。
xdb_files数据表设计如下:
this.Config = {
"EncodeType" : "UTF-8"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型
, "AllowMultiSelect" : 1//多选开关。1:开启多选。0:关闭多选
, "AppPath" : ""//网站虚拟目录名称。子文件夹 web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,5,19,54681"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"
, "ClsidPartition" : "A6E74589-C2C6-48a2-B39E-B6C6A1A03AF0"
, "ClsidDroper" : "5A382701-5FCC-4aeb-B301-E365F7138FDB"
, "ClsidUploader" : "EC049103-5ABF-47fc-A8C9-7C48BB864449"
};
将UrlCreate,UrlPost,UrlComplete,UrlList,UrlDel地址改为实际地址。
1.在引用页面设置CombinBoxMgr.Fields的值
2.在HttpUploader.js的HttpUploader_MD5_Complete方法中增加Fields属性
3.在ajax_create_fid.aspx页面中接收附加信息
在combinbox.js文件中有一个字段Fields属性,可通过扩展这个属性的字段向服务器上传特殊标识信息
//附加参数
this.Fields = {
"UserName": "test"
, "UserPass": "test"
,"uid":0//可以设置这个属性的值
,"fid":0
};
1.在引用页面可以设置uid的值
<script language="javascript" type="text/javascript">
var cbItemLast = null;
var cbMgr = new CombinBoxMgr();
cbMgr.Fields["uid"] = 2;//在这里可以设置为当前用户ID的值
//也可以动态添加其它字段
cbMgr.Fields["Category"] = "soft";
$(document).ready(function()
{
cbMgr.LoadInControl("FilePanel");
cbMgr.Init();
});
</script>
2.在HttpUploader.js的HttpUploader_MD5_Complete方法中增加Fields属性
//MD5计算完毕
function HttpUploader_MD5_Complete(obj)
{
var md5 = obj.ATL.MD5;
obj.MD5 = md5;
//在此处增加服务器验证代码。
obj.pMsg.innerText = "MD5计算完毕,开始连接服务器...";
$.ajax({
type: "POST"
, url: obj.Config["UrlCreate"]
, data: { md5: obj.MD5, uid: obj.Fields["uid"], fileLength: obj.FileLength, fileSize: obj.FileSize, pathLocal: obj.PathLocal, time: Date() }
, success:
function(msg)
{
var json = eval(msg)
json = json[0];
obj.fid = json.fid;
obj.ResetFields();
//服务器已存在相同文件,且已上传完成
if ("True" == json.PostComplete)
{
obj.QuickComplete();
} //服务器文件没有上传完成
else
{
obj.ATL.PostedLength = json.PostedLength;
obj.pProcess.style.width = json.PostedPercent;
obj.pPercent.innerText = json.PostedPercent;
obj.Upload();
}
}
, error: function() { alert("向服务器发送MD5信息错误!"); }
});
}
3.在ajax_create_fid.aspx中接收附加信息值
string uid = Request.Form["uid"];
保留所有权利
官方网站:http://www.ncmem.com/
产品首页:http://www.ncmem.com/webplug/http-uploader3/index.aspx
在线演示:http://www.ncmem.com/products/http-uploader3/demo/index.html
产品介绍:/article/5268169.html
开发文档-ASP:/article/5268171.html
开发文档-PHP:/content/4199730.html
开发文档-JSP:/content/4199729.html
开发文档-ASP.NET:/content/4199731.html
升级日志:/article/5268170.html
资源下载:cab安装包,开发文档
示例下载(.NET):ACCESS示例(GB2312)
示例下载(JSP):JSP-ACCESS示例(GB2312),JSP-ACCESS示例(UTF-8),JSP-Sql2005示例(UTF-8),JSP-MySQL示例(UTF-8)
示例下载(JSP-WebLogic环境):ACCESS示例(GB2312),ACCESS示例(UTF-8)
示例下载(PHP):MySQL示例(UTF-8)
问题反馈:http://www.ncmem.com/bbs/showforum-4.aspx
VC运行库:http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=29
联系信箱:1085617561@qq.com
联系QQ:1085617561
更新记录:
更新时间 | 描述 |
2012-2-16 | 增加断点续传章节。 |
2012-2-17 | 增加自动拼接路径章节 |
1. 界面
拖拽面板界面。说明:支持文件和文件夹拖拽。如果用户拖拽的是文件夹,则控件将会读取此文件夹下的所有文件,包括所有子文件夹中的文件。
MD5计算进度
MD5计算完毕
上传中
上传完成界面
1. 搭建测试环境
搭建测试环境步骤如下:1.搭建Web服务器。IIS,Apatch, Apache Tomcat 6
2.修改index.html上传地址
2. 整合到现有系统中
主要步骤:上传控件相关文件。一般是整个HttpUploader文件夹
修改cab文件下载地址
修改classid和codebase地址
设置服务器编码
修改文件上传地址
在引用页面调用
2.1. 上传控件相关文件
上传HttpUploader文件夹asp.net//请根据项目类型上传相应的文件夹,如果是PHP项目则上传PHP文件夹,如果是ASP项目则上传asp文件夹
HttpUploader
说明:
请不要手动解压HttpUploader.cab文件,请将完整的HttpUploader.cab文件上传到服务器中。IE浏览器会自动安装CAB。CAB文件相当于是一个自动安装控件的脚本。
2.2. 修改文件上传地址
打开combinbox.js文件,找到Config配置代码this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
修改UrlCreate,UrlPost,UrlProcess,UrlComplete,UrlList,UrlDel。
注意:
Url必须为完整地址,请勿使用相对地址。
UrlCreate = http://www.ncmem.com/upload.aspx//正确地址
UrlCreate = /upload.aspx//错误地址
如果希望使用相对地址,请参考自动拼接路径章节
2.3. 修改CAB文件下载地址
打开combinbox.js文件,找到Config配置代码this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
2.4. 修改classid和codebase地址
打开combinbox.js文件,修改控件的classid及codebase地址。this.ActiveX = {
"Uploader" : "Xproer.HttpUploader4"//这里的Xproer要改为单独生成的名称。
, "Partition" : "Xproer.HttpPartition4"//这里的Xproer要改为单独生成的名称。
};
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
说明:
为了避免与其它公司的控件产生冲突,每个控件的classid值都不相同。在购买产品后,我们会为每个公司单独生成序列号。
当控件升级(版本号变化)或CAB文件地址更改,必须修改codebase的地址。否则用户的IE浏览器将无法正常加载控件。
请确保codebase的地址与示例中的地址一致,version字符不能丢失,版本号中间不能有空格。
如果公司名称是QQ,则ActiveX的ProjID如下:
QQ.HttpUploader
QQ.HttpPartition
2.5. 设置服务器编码
打开HttpUploader.js文件,找到Config配置代码this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
修改EncodeType的值。EncodeType为文件上传页面的编码,此编码必须与网站保持一致。因为Http文件上传控件会根据此编码类型来对中文文件名称进行编码处理。示例如下:
如果网站的编码是GB2312,EncodeType = "GB2312"
如果网站的编码是UTF-8,EncodeType = "UTF-8"
2.6. 在页面中引用
1.添加头文件2.添加引用代码
在<head></head>标签中间添加下列代码
<link href="css/HttpUploader.css" type="text/css" rel="Stylesheet"/>
<script type="text/javascript" src="js/FileLister.js"></script>
<script type="text/javascript" src="js/HttpUploader.js"></script>
<script type="text/javascript" src="js/combinbox.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
var cbItemLast = null;
var cbMgr = new CombinBoxMgr();
$(document).ready(function()
{
cbMgr.LoadInControl("FilePanel");//在指定的DIV中加截控件
cbMgr.Init();
});
</script>
在<body></body>标签中间的适当位置添加下列代码:
<div id="FilePanel"></div>
3. 自动拼接路径
如果域名会经常变动不是固定域名,可以使用自动拼接路径函数InitPath()来简化控件布署。以下示例演示如何使用自动拼接路径
修改combinbox.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 imgUploader = new ImageUploader();
imgUploader.Config["AppPath"] = "/www/";//设置网站目录
imgUploader.Load();
window.onload = function()
{
imgUploader.Init();
};
</script>
调用InitPath()后,PostUrl和CabPath将会被自动拼接成下列字符串
PostUrl = http://www.ncmem.com/upload.aspx
CabPath = http://www.ncmem.com/HttpUploader/HttpUploader.cab#version=2,4,11,45688
1. 控件升级
一般情况下控件升级后只需要更新服务器的HttpUploader.cab文件和修改HttpUploader.js中的控件版本号。用户打开浏览器时IE会自动提示用户安装最新的控件。效果图如下:主要步骤如下:
1.重新上传HttpUploader.cab文件
2.修改HttpUploader.js中的控件版本号。
1.1. 重新上传HttpUploader.cab文件
在控件升级后,我们会将最新的HttpUploader.cab文件发给开发人员。开发人员只需要将最新的HttpUploader.cab文件上传到服务器即可。1.2. 修改HttpUploader.js中的控件版本号
一般情况下,控件更新后版本号也会更新。在重新上传HttpUploader.cab后,需要修改控件的版本号。请找到类似以下代码后,修改version后面的版本号。
this.Config = {
"EncodeType" : "UTF-8"
,"CompanyLicensed" :"武汉命运科技有限公司"//请勿修改此处授权名称,如果需要修改请与我们联系。
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,png,gif,bmp
, "AllowMultiSelect": 0//多选开关。1:开启多选。0:关闭多选
, "AppPath" : ""//网站虚拟目录名称。子文件夹 web
, "CabPath" : "http://www.ncmem.com/httpUploader/HttpUploader.cab#version=2,4,11,45688"//CAB文件地址
, "PostUrl" : "http://localhost:1591/asp.net/upload.aspx"//文件上传路径
, "ClsidDroper" : "4D2454F8-EB25-465f-B867-C2A3E9F3D4B4"//拖拽控件
, "ClsidUploader" : "7AAE6FD3-C2F2-49d5-A790-1103848B3531"//文件上传控件
, "ClsidPartition" : "6F3EB4AF-FC9C-4570-A686-88B4B427C6FE"//文件选择控件
};
2. 用户接口
2.1. 配置上传地址
文件上传地址一般都在combinbox.js文件中配置this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
2.2. 设置服务器编码方式
服务器编码设置一般都在combinbox.js文件中配置this.Config = {
"EncodeType" : "GB2312"//设置上传编码。必须与网站配置相同。建议在HttpUploader.js中设置,这样可以在多个页面引用,而不需要再次设置。
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
2.3. 设置允许上传的文件类型
文件上传地址一般都在combinbox.js文件中配置this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
假设我们设置允许上传的文件类型为jpg,bmp,png,gif,则效果图如下:
2.4. 设置允许上传的文件大小
在线字节计算工具:http://www.beesky.com/newsite/bit_byte.htm允许上传的文件大小一般都在combinbox.js文件中配置
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
2.5. 设置文件块大小
在线字节计算工具:http://www.beesky.com/newsite/bit_byte.htm文件块大小一般都在combinbox.js文件中配置。
一般情况下推荐设置为128KB,这是为了保证在网络环境不稳定的情况下,控件能够正常上传。如果用户的网络环境比较稳定,可适当调大这个值。
this.Config = {
"EncodeType" : "GB2312"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型。所有类型:*。自定义类型:jpg,bmp,png,gif,rar,zip,7z,doc。设置允许上传的文件类型,使用英文逗号(,)分隔。
, "FileSizeLimit" : "0"//自定义允许上传的文件大小,以字节为单位。表示不限制。
, "FilesLimit" : 0//文件选择数限制。表示不限制
, "AllowMultiSelect" : 1//多选开关。:开启多选。:关闭多选
, "RangeSize" : 131072//文件块大小,以字节为单位。必须为64KB的倍数。推荐大小:128KB。
, "AppPath" : ""//网站虚拟目录名称。子文件夹web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,7,41,55266"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"//在服务端创建一个文件信息标识地址。
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"//文件块上传地址
, "UrlProcess" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_process.aspx"//文件上传进度信息记录地址。
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"//文件上传完成状态记录地址。
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"//文件列表地址(演示包含已上传完成的文件和未上传完成的文件)。
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"//删除文件地址
, "ClsidDroper" : "1E7C9F05-406F-4de6-8348-53AD96A79600"
, "ClsidUploader" : "65D197E1-9CBC-441a-98BC-B6431C6E4617"
, "ClsidPartition" : "5412F8C8-BACE-430e-9BD8-4E75F0E21E03"
};
5.4. 设置附加信息
附加信息的作用就是在上传图片的同时向服务器提交额外的字段信息。比如当用户向服务器上传截图时,服务器需要知道是哪位用户上传的截图,这时可以将用户ID添加到附加信息中,这样服务器在获取截图信息的同时也能够根据附加信息知道是哪位用户上传的截图。客户端:
uploaderMgr.Fields["UserName"] = "test";
服务端:
string fname = Request.Form["UserName"];
开发人员可以根据自已的业务需求来扩展附加信息:
客户端:
uploaderMgr.Fields["f1"] = "f1";
uploaderMgr.Fields["f2"] = "f2";
uploaderMgr.Fields["f3"] = "f3";
uploaderMgr.Fields["f4"] = "f4";
uploaderMgr.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"];
5.5. 上传本地文件
请要步骤如下:1.调用AddFile函数添加本地文件,注意路径需要使用双斜框(\\)
2.调用PostFirst函数开始上传文件。
<script type="text/javascript" language="javascript">
var uploaderMgr = new HttpUploaderMgr();
uploaderMgr.Load();//加载控件
uploaderMgr.AddFile("D:\\Soft\\QQ2010.exe");
uploaderMgr.PostFirst();
</script>
6. 断点续传
HttpUploader会以POST方式每次向服务器提交128KB的文件数据和以下附加信息字段字段名称 | 类型 | 长度 | 可能的值 | 说明 |
complete | string | 5 | true,false | 表示文件数据块已传完 |
FileName | string | 255 | d:\\soft\\QQ2010.exe | 上传的文件名称。包含本地文件路径。 |
FileSize | long | 1000 | 文件总大小,以字节为单位 | |
RangePos | long | 0 | 文件块索引。服务根据此值来保存文件块数据。 | |
md5 | string | 32 | 4b213776e6f72c3daa727524f8234115 | 文件MD5,用来验证服务器是否存在相同文件。 |
以下示例演示从100字节的位置开始续传QQ2010.exe文件
<script type="text/javascript" language="javascript">
var uploaderMgr = new HttpUploaderMgr();
uploaderMgr.Load();//加载控件
//添加续传文件
uploaderMgr.AddResumeFile("D:\\Soft\\QQ2010.exe","100","10%");
uploaderMgr.PostFirst();
</script>
5.1. IIS的设置
开启保持HTTP连接
1. JavaScript对象
1.1. HttpUploader对象
类型:JavaScript
文件上传对象的包装类,用户在实际的项目中只需要创建HttpUploader对象,然后通过HttpUploader对象就可以进行文件上传操作。
语法:
JavaScript(声明)
function HttpUploader() { }
方法
名称 | 说明 | |
Ready | 指示文件上传对象准备完毕 | |
Post | 开始上传文件 | |
Stop | 停止文件上传 | |
PostNext | 继续传输上传队列中的下一个文件 |
将上传任务状态设置为准备状态。
Post方法
开始上传文件。
说明:此函数将会自动实现断点续传功能。如果当前任务文件只上传了一半,则在下次开始时XSUploader组件将会自动定位到上次上传的位置继续上传数据。
Stop方法
停止上传任务。
PostNext方法
继续上传队列中下一个任务。
属性
名称 | 说明 | |
pMsg | 消息对象。 | |
[align=left]pProcess[/align] | 上传进度条对象 | |
[align=left]pPercent[/align] | 上传进度百分比。 | |
[align=left]pButton[/align] | 控制按钮 | |
[align=left]TimeOutID[/align] | 定时器 | |
Ext | 文件扩展名。例: | |
LocalFile | 不包含路径的文件名称。例:qq.exe | |
LocalFileName | 包含完整路径的本地文件名称。例:C:\qq.exe | |
FileLength | 文件大小。以字节为单位。 1GB=1024MB 1MB=1024KB 1KB=1024byte |
类型:JavaScript
上传文件管理类。
方法
AddFile方法
添加一个文件到上传对列中
语法:
void AddFile(fid);
参数:
fid
新上传任务的唯一文件ID,此ID用来区域不同的上传任务。
AddFeidl方法
AddResumeFile方法
添加一个续传文件。
语法:
this.AddResumeFile = function(filePath, postedLength, postedPercent, md5)
参数:
filePath
包含本地文件路径的文件名称。示例:D:\\Soft\\QQ2010.exe
postedLength
已上传文件大小(以字节为单位),即续传起点。示例:10020
说明:此值一般保存在数据库中。在页面加载时可从数据库读取此值然后传给控件。
postedPercent
已上传百分比。示例:50%
md5
文件MD5。一般从服务器读取。
PostFirst方法
开始上传队列中的第一个文件。
语法:
void PostFirst()
Exist方法
检查上传队列中是否存在指定文件。
说明:此函数是根据本地文件的完整路径来检测的。
bool Exist();
返回值:
true
表示存在。
false
不存在。
SetFileFilter方法
设置过滤的文件类型。
语法:
void SetFileFilter(filter)
参数:
filter 文件类型字符串。由逗号分隔。示例:exe,jpg,php
属性
Fields属性
上传时附加的额外信息。
注意:此属性暂时不支持中文字符串。
以下示例演示上传时添加用户名和密码的额外信息:
[align=left]var uploaderMgr = new HttpUploaderMgr();[/align]
[align=left]uploaderMgr.Fields["UserName"] = "test";[/align]
uploaderMgr.Fields["UserPass"] = "test";
Config属性
提供全局配置信息。
语法:
[align=left] this.Config = {[/align]
[align=left] "EncodeType": "UTF-8"[/align]
[align=left] ,"CompanyLicensed":"北京新颖网络"[/align]
[align=left] , "FileFilter": "*"//文件类型[/align]
[align=left] , "AppPath": ""//网站虚拟目录名称。子文件夹 web[/align]
[align=left] , "CabPath": "/products/http-uploader/demo2/HttpUploader.cab#version=2,4,11,45688"[/align]
[align=left] , "PostUrl": "/asp.net/upload.aspx"[/align]
[align=left] , "ClsidDroper": "4D2454F8-EB25-465f-B867-C2A3E9F3D4B4"[/align]
[align=left] , "ClsidUploader": "7AAE6FD3-C2F2-49d5-A790-1103848B3531"[/align]
[align=left] , "ClsidPartition": "6F3EB4AF-FC9C-4570-A686-88B4B427C6FE"[/align]
};
EncodeType值
服务器编码方式。
此属性必须和web.config配置文件对应。
如果服务器端编码方式是UTF-8
<globalizationrequestEncoding="utf-8"responseEncoding="utf-8"/>
则客户端也必须是UTF-8
[align=left]var uploaderMgr = new HttpUploaderMgr();[/align]
uploaderMgr.Config["EncodeType"] = "UTF-8";
如果服务端编码方式是GB2312
<globalizationrequestEncoding="gb2312"responseEncoding="gb2312"/>
则客户端也必须是GB2312
[align=left]var uploaderMgr = new HttpUploaderMgr();[/align]
uploaderMgr.Config["EncodeType"] = "GB2312";
PostUrl值
接收处理上传文件的URL。
2. ActiveX对象
2.1. Xproer.HttpDroper对象
CLSID:7193B258-CA68-4eee-A64A-43C7E3BD1857
类型:ActiveX
文件拖放面板,为用户提供文件的拖放功能。
事件
OnFileDrop事件
文件拖放事件。当用户从资源管理器向拖放面板中拖放文件时此事件将会自动被调用。
示例
[align=left]<HTML>[/align]
[align=left]<HEAD>[/align]
[align=left]<TITLE>New Page</TITLE>[/align]
[align=left]</HEAD>[/align]
[align=left]<BODY>[/align]
[align=left] [/align]
[align=left]<OBJECT ID="FilePanel1" WIDTH=192 HEIGHT=192 CLASSID="clsid: AF145FF6-EF91-4C91-BD85-D4ECCA224D27" DATA="DATA:application/x-oleobject;BASE64,P0yJ/coEwUiWnGww8Tau4AADAADYEwAA2BMAAA==">[/align]
[align=left]</OBJECT>[/align]
[align=left]<div id="divFileLister"></div>[/align]
[align=left]<script language="javascript" type="text/javascript">[/align]
[align=left] var obj = document.getElementById("FilePanel1");[/align]
[align=left] obj.OnFileDrop = EventFileDrop;[/align]
[align=left] function EventFileDrop()[/align]
[align=left] {[/align]
[align=left] var lister = document.getElementById("divFileLister");[/align]
[align=left] var list = obj.GetSelectedFiles();//获取选择的文件[/align]
[align=left] for (var index = list.lbound(1); index <= list.ubound(1); ++index)[/align]
[align=left] {[/align]
[align=left] lister.innerHTML += "<p>文件名:" + list.getItem(index) + "</p>";[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left]</script>[/align]
[align=left]</BODY>[/align]
</HTML>
2.2. Xproer.HttpPartition对象
CLSID:BC5E2E5D-49E2-4d34-A606-902640DB92AC
类型:ActiveX
多文件选择对象。弹出一个文件选择对话框,为用户提供选择多个文件的功能。
方法
名称 | 说明 | |
ShowDialog | 弹出文件选择对话框 | |
GetSelectedFiles | 获取用户选择的文件列表 |
获取用户选择的文件列表数组。
属性
名称 | 说明 | |
FileFilter | 允许上传的文件扩展名。使用逗号分隔不同类型名称。 允许上传指定类型文件示例:jpg,gif,png,bmp,doc,exe,txt 如果允许上传任意类型示例:* |
下面的代码示例将会创建一个文件选择框,并弹出用户所选择的文件名称。
JavaScript:
[align=left]<script type="text/javascript" language="javascript">[/align]
[align=left] function ShowSelectFileDlg()[/align]
[align=left] {[/align]
[align=left] var manager = new HttpUploaderMgr();[/align]
[align=left] var obj = new ActiveXObject(manager.ActiveX["Partition"]);;//创建文件选择对话框[/align]
[align=left] [/align]
[align=left] if (!obj.ShowDialog()) return;[/align]
[align=left] var list = obj.GetSelectedFiles();//获取用户选择的文件[/align]
[align=left] if (list == null) return;[/align]
[align=left] if (list.lbound(1) == null) return;[/align]
[align=left] [/align]
[align=left] for (var index = list.lbound(1); index <= list.ubound(1); index++)[/align]
[align=left] {[/align]
[align=left] if (!manager.Exist(list.getItem(index)))[/align]
[align=left] {[/align]
[align=left] manager.AddFile(list.getItem(index));[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] manager.PostFirst();[/align]
[align=left] }[/align]
[align=left]</script>[/align]
2.3. Xproer.HttpUploader对象
CLSID:33A128F3-9CA3-4a7f-A1FE-1DB6BF5156AA
类型:ActiveX
HTTP文件上传对象,负责文件具体的上传和续传工作。
属性
类型 | 名称 | 说明 | |
int | FileID | 文件ID。必须唯一。 | |
long | PostedLength | 已上传的文件大小。以字节为单位。最大约为2G大小 此参数主要提供给断点续传功能使用。 如果指定了此参数,则控件将会从此位置处开始上传文件。 | |
string | LocalFile | 包含完整路径的本地文件名称。例:D:\QQ.exe | |
string | FileLength | 文件大小,以字节为单件的字符串。 | |
string | FileSize | 文件大小,格式化后的文件大小字符串。示例:10MB,10.20MB,3KB | |
string | MD5 | 文件MD5值。一般在续传时用到。 |
名称 | 说明 | |
OnComplete | 在文件上传完成时发生 | |
OnPost | 每当向服务器传输成功一部分数据时发生 | |
OnStop | 在文件上传停止时发生 | |
OnError | 在文件上传出现错误时发生 |
传输完成事件,当文件成功上传完毕后,系统将会调用此方法
参数:
arguments[0]
文件ID。
OnPost事件
传输数据事件。每当HttpUploader插件成功向服务器传输二进制数据后将触发此事件。
参数:
obj
HttpUploader JS对象
speed
传输速度
postedLength
已上传字节
percent
已上传百分比。
time
剩余完成时间
OnStop事件
传输停止事件,当上传任务停止时系统将会自动调用此方法
参数:
arguments[0]
文件ID。
OnError事件
传输错误事件,当传输出现错误时系统将会自动调用此事件。
参数:
arguments[0]
文件ID。
arguments[1]
错误码
[align=left]0[/align] | [align=left]连接服务器错误[/align] |
[align=left]1[/align] | [align=left]发送数据错误[/align] |
[align=left]2[/align] | [align=left]接收数据错误[/align] |
[align=left]3[/align] | [align=left]未设置本地文件[/align] |
[align=left]4[/align] | [align=left]本地文件不存在[/align] |
[align=left]5[/align] | [align=left]打开本地文件错误[/align] |
[align=left]6[/align] | [align=left]不能读取本地文件[/align] |
[align=left]7[/align] | [align=left]公司未授权[/align] |
[align=left]8[/align] | [align=left]未设置IP[/align] |
[align=left]9[/align] | [align=left]域名未授权[/align] |
[align=left]10[/align] | [align=left]文件大小超过限制[/align] |
[align=left]200[/align] | [align=left]无打打开文件[/align] |
[align=left]201[/align] | [align=left]文件大小为0[/align] |
下面的代码将会创建一个上传项,并将本地C盘下的myfile.txt文件上传到服务端,并以myfile.txt保存。
JavaScript
[align=left]var upFile = new FileUploader(1);//这里创建了一个文件上传任务,并将文件ID设置为1[/align]
[align=left]upFile.ATL.PostUrl = "http://www.ncmem.com/upload.aspx";//设置上传地址[/align]
[align=left]upFile.ATL.LocalFileName = "C:\\myfile.txt";//设置要上传的本地文件[/align]
[align=left]//设置事件,这些事件必须设置,否则上传任务将无法执行[/align]
[align=left]upFile.ATL.OnComplete = function() { }[/align]
[align=left]upFile.ATL.OnPost = function() { }[/align]
[align=left]upFile.ATL.OnStop = function() { }[/align]
[align=left]upFile.ATL.OnError = function() { }[/align]
upFile.Post(); //开始上传
3. UI模板
您可以根据实际需求来修改以下模板。
HTML:
[align=left]<div class="UploaderItem" id="UploaderTemplate">[/align]
[align=left] <div class="UploaderItemLeft">[/align]
[align=left] <div class="FileName top-space">HttpUploader程序开发.pdf</div>[/align]
[align=left] <div class="ProcessBorder top-space">[/align]
[align=left] <div class="Process"></div>[/align]
[align=left] </div>[/align]
[align=left] <div class="PostInf top-space">已上传:15.3MB 速度:20KB/S 剩余时间:10:02:00</div>[/align]
[align=left] </div>[/align]
[align=left] <div class="UploaderItemRight">[/align]
[align=left] <a class="Btn" href="javascript:void(0)">取消</a>[/align]
[align=left] <div class="ProcessNum">35%</div>[/align]
[align=left] </div>[/align]
</div>
4. HTML示例
以下示例将会弹出一个对话框并将用户选定的文件上传到服务器中。
JavaScript:
[align=left]<script type="text/javascript" language="javascript">[/align]
[align=left] function ShowSelectFileDlg()[/align]
[align=left] {[/align]
[align=left] var manager = new HttpUploaderMgr();[/align]
[align=left] var obj = new ActiveXObject(manager.ActiveX["Partition"]);[/align]
[align=left] if (!obj.ShowDialog()) return;//打开选择文件对话框[/align]
[align=left] [/align]
[align=left] var list = obj.GetSelectedFiles();//获取用户选择的文件[/align]
[align=left] if (list == null) return;[/align]
[align=left] if (list.lbound(1) == null) return;[/align]
[align=left] for (var index = list.lbound(1); index <= list.ubound(1); index++)[/align]
[align=left] {[/align]
[align=left] if (!manager.Exist(list.getItem(index)))[/align]
[align=left] {[/align]
[align=left] manager.AddFile(list.getItem(index));[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] manager.PostFirst();[/align]
[align=left] }[/align]
[align=left]</script>[/align]
1. ASP.NET示例(demoAccess)
说明:此示例支持1000G文件的续传操作。
编码:GB2312
主要配置步骤如下:
创建数据库。
修改js/combinbox.js中的配置信息
运行demoAccess/index.htm文件
1.1. 文件列表
文件名称 | 说明 |
db/ajax_complete.aspx | 负责更新数据库中文件项的完成状态,将文件项的完成状态设为已完成。 引用位置:在HttpUploader.js中的HttpUploader_Complete函数引用。 |
db/ajax_create_fid.aspx | 负责向数据库中添加一个新的文件项,并将新的文件项信息返回给客户端。 引用位置:在HttpUploader.js中的HttpUploader_MD5_Complete函数中引用。 |
db/ajax_del.aspx | 负责更新数据库中文件项的删除状态,将文件项的删除状态设为已删除。 引用位置:在FileLister.js中的FileItemRemove函数中引用 |
db/ajax_list.aspx | 以JSON格式列出数据库中所有未完成的文件列表 引用位置:在FileLister.js中的LoadData函数中引用。 |
db/ajax_post.aspx | 负责接收HTTP断点续传控件上传的文件块数据,并更新数据库中文件项进度信息。 |
db/FileResumer.cs | 接收HTTP断点续传控件POST上来的文件块数据,并将文件块拼接成一个完整文件。 |
db/HttpUploaderCfg.cs | 上传文件夹配置类。可自定义文件上传路径。 |
db/HttpUploaderDB.cs | 数据库操作类。 |
db/xdb_files.cs | 数据表模型。 |
db/XDebug.cs | 输出调试信息的简单封装。 |
js/combinbox.js | 组合框JS类。封装了文件列表和上传列表两个类。提供全局的配置信息。比如文件上传地址,文件删除地址,文件列表地址 |
js/FileLister.js | 文件列表组件。 |
js/HttpUploader.js | 文件上传列表组件。 |
js/HttpUploader.css | 控件样式文件 |
js/jquery-1.3.2.min.js | JQuery压缩文件。 |
index.htm | 演示页面。 |
test.htm | 测试页面 |
1.2. 创建数据库
说明:db文件夹中已自带一个ACCESS数据库文件:db.mdb。此数据库文件可演示2G以下大小的文件断点续传功能。如果希望处理2G以上的文件,需要重建数据表。并将FileLength,FilePos,PostedLength字段类型改为long形。
xdb_files数据表设计如下:
字段名称 | 类型 | 长度 | 描述 |
fid | 自动编号 | 文件ID,唯一。 | |
uid | int | 用户ID | |
FileNameLocal | varchar | 255 | 文件在本地电脑中的名称。例:QQ.exe |
FileNameRemote | varchar | 255 | 文件在服务器中的名称。一般为文件MD5+扩展名。 |
FilePathLocal | varchar | 512 | 文件在本地电脑中的完整路径。 示例:D:\\Soft\\QQ.exe |
FilePathRemote | varchar | 512 | 文件在服务器中的完整路径。 示例:F:\ftp\user1\QQ2012.exe |
FilePathRelative | varhcar | 512 | 文件在服务器中的相对路径。 示例:/www/web/upload/QQ2012.exe |
FileMD5 | varchar | 32 | 文件MD5 |
FileLength | varchar | 19 | 文件总长度。以字节为单位 最大值:9,223,372,036,854,775,807 |
FileSize | varchar | 10 | 格式化的文件尺寸。示例:10MB |
FilePos | varchar | 19 | 文件续传位置。 最大值:9,223,372,036,854,775,807 |
PostedLength | varchar | 19 | 已上传长度。以字节为单位。 最大值:9,223,372,036,854,775,807 |
PostedPercent | varchar | 6 | 已上传百分比。示例:10% |
PostComplete | 是/否 | 1 | 是否已上传完毕。 |
PostedTime | datetime | 文件上传时间 | |
IsDeleted | 是/否 | 1 | 是否已删除。 |
1.3. 修改js/combinbox.js中的配置信息
找到如下语句:this.Config = {
"EncodeType" : "UTF-8"
, "CompanyLicensed" : "武汉命运科技有限公司"
, "FileFilter" : "*"//文件类型
, "AllowMultiSelect" : 1//多选开关。1:开启多选。0:关闭多选
, "AppPath" : ""//网站虚拟目录名称。子文件夹 web
, "CabPath" : "http://www.ncmem.com/products/http-uploader4/demo/HttpUploader.cab#version=2,5,19,54681"
, "UrlCreate" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_create_fid.aspx"
, "UrlPost" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_post.aspx"
, "UrlComplete" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_complete.aspx"
, "UrlList" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_list.aspx"
, "UrlDel" : "http://localhost:1591/asp.net/demo-db-gb2312/db/ajax_del.aspx"
, "ClsidPartition" : "A6E74589-C2C6-48a2-B39E-B6C6A1A03AF0"
, "ClsidDroper" : "5A382701-5FCC-4aeb-B301-E365F7138FDB"
, "ClsidUploader" : "EC049103-5ABF-47fc-A8C9-7C48BB864449"
};
将UrlCreate,UrlPost,UrlComplete,UrlList,UrlDel地址改为实际地址。
1.4. 与现有系统整合-将文件与用户ID对应
主要步骤如下:1.在引用页面设置CombinBoxMgr.Fields的值
2.在HttpUploader.js的HttpUploader_MD5_Complete方法中增加Fields属性
3.在ajax_create_fid.aspx页面中接收附加信息
在combinbox.js文件中有一个字段Fields属性,可通过扩展这个属性的字段向服务器上传特殊标识信息
//附加参数
this.Fields = {
"UserName": "test"
, "UserPass": "test"
,"uid":0//可以设置这个属性的值
,"fid":0
};
1.在引用页面可以设置uid的值
<script language="javascript" type="text/javascript">
var cbItemLast = null;
var cbMgr = new CombinBoxMgr();
cbMgr.Fields["uid"] = 2;//在这里可以设置为当前用户ID的值
//也可以动态添加其它字段
cbMgr.Fields["Category"] = "soft";
$(document).ready(function()
{
cbMgr.LoadInControl("FilePanel");
cbMgr.Init();
});
</script>
2.在HttpUploader.js的HttpUploader_MD5_Complete方法中增加Fields属性
//MD5计算完毕
function HttpUploader_MD5_Complete(obj)
{
var md5 = obj.ATL.MD5;
obj.MD5 = md5;
//在此处增加服务器验证代码。
obj.pMsg.innerText = "MD5计算完毕,开始连接服务器...";
$.ajax({
type: "POST"
, url: obj.Config["UrlCreate"]
, data: { md5: obj.MD5, uid: obj.Fields["uid"], fileLength: obj.FileLength, fileSize: obj.FileSize, pathLocal: obj.PathLocal, time: Date() }
, success:
function(msg)
{
var json = eval(msg)
json = json[0];
obj.fid = json.fid;
obj.ResetFields();
//服务器已存在相同文件,且已上传完成
if ("True" == json.PostComplete)
{
obj.QuickComplete();
} //服务器文件没有上传完成
else
{
obj.ATL.PostedLength = json.PostedLength;
obj.pProcess.style.width = json.PostedPercent;
obj.pPercent.innerText = json.PostedPercent;
obj.Upload();
}
}
, error: function() { alert("向服务器发送MD5信息错误!"); }
});
}
3.在ajax_create_fid.aspx中接收附加信息值
string uid = Request.Form["uid"];
相关文章推荐
- HTTP断点续传控件-ASP开发文档-Xproer.HttpUploader5
- HTTP断点续传控件-JSP开发文档-Xproer.HttpUploader5
- Web大文件上传控件-asp.net-bug修复-Xproer.HttpUploader6.2
- HTTP图片上传控件布署文档-Xproer.HttpImgUploader
- Web大文件上传控件-asp.net-bug修复-Xproer.HttpUploader6.2
- asp.net控件开发基础 来源:http://www.clingingboy.com/blog/article.asp?id=258
- HTTP断点续传控件升级日志-Xproer.HttpUploader3
- ASP.NET网站开发——用户控件与HttpHandle
- 开发ASP.NET Atlas服务器端Extender控件——编写客户端Behavior
- asp.net控件开发基础系列
- Asp.net 2.0控件开发相关调试(JavaScript调试和自定义控件设计时调试)
- Asp.net 2.0 自定义控件开发[创建自定义右键PopupMenu控件][示例代码下载]
- ASP.NET控件开发学习笔记--第4回 为控件添加属性
- ASP.NET控件开发学习笔记--第6回 ViewState
- asp.net控件开发基础(5) -- 复杂属性、内嵌属性
- [ASP.NET开发系列]在用户控件中添加属性 -- 摘自 tigerwen01
- asp.net控件开发基础(3)
- asp.net控件开发(二)-简单属性
- ASP.NET组件与开发之复合控件的事件处理
- Asp.net 2.0 自定义控件开发[创建自定义浮动菜单FloadMenu控件][示例代码下载]