示例下載(.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
聯系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,用來驗證服務器是否存在相同文件。 |
如果開發人員希望用戶關閉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>
|
|
名稱
|
說明
|
|
Ready
|
指示文件上傳對象准備完畢
|
|
|
Post
|
開始上傳文件
|
|
|
Stop
|
停止文件上傳
|
|
|
PostNext
|
繼續傳輸上傳隊列中的下一個文件
|
|
|
名稱
|
說明
|
|
pMsg
|
消息對象。
|
|
|
pProcess
|
上傳進度條對象
|
|
|
pPercent
|
上傳進度百分比。
|
|
|
pButton
|
控制按鈕
|
|
|
TimeOutID
|
定時器
|
|
|
Ext
|
文件擴展名。例:
|
|
|
LocalFile
|
不包含路徑的文件名稱。例:qq.exe
|
|
|
LocalFileName
|
包含完整路徑的本地文件名稱。例:C:\qq.exe
|
|
|
FileLength
|
文件大小。以字節為單位。
1GB=1024MB
1MB=1024KB
1KB=1024byte
|
|
|
名稱
|
說明
|
|
ShowDialog
|
彈出文件選擇對話框
|
|
|
GetSelectedFiles
|
獲取用戶選擇的文件列表
|
|
|
名稱
|
說明
|
|
FileFilter
|
允許上傳的文件擴展名。使用逗號分隔不同類型名稱。
允許上傳指定類型文件示例:jpg,gif,png,bmp,doc,exe,txt
如果允許上傳任意類型示例:*
|
|
|
類型
|
名稱
|
說明
|
|
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
|
在文件上傳出現錯誤時發生
|
|
0
|
連接服務器錯誤
|
|
1
|
發送數據錯誤
|
|
2
|
接收數據錯誤
|
|
3
|
未設置本地文件
|
|
4
|
本地文件不存在
|
|
5
|
打開本地文件錯誤
|
|
6
|
不能讀取本地文件
|
|
7
|
公司未授權
|
|
8
|
未設置IP
|
|
9
|
域名未授權
|
|
10
|
文件大小超過限制
|
|
200
|
無打打開文件
|
|
201
|
文件大小為0
|
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"];
