MP3文件上传控件开发文档-Mp3Uploader
版权所有 2009-2011 北京新颖网络
保留所有权利
产品首页：http://www.ncmem.com/webplug/mp3uploader/index.aspx
在线演示：http://www.ncmem.com/products/mp3uploader/demo/index.html
产品介绍：http://www.cnblogs.com/xproer/archive/2011/12/26/2301684.html
开发文档：http://www.cnblogs.com/xproer/archive/2011/12/26/2301685.html
升级日志：http://www.cnblogs.com/xproer/archive/2011/12/26/2301703.html
示例下载：http://www.ncmem.com/download/Mp3Uploader-demo.rar
文档下载：http://www.ncmem.com/download/Mp3Uploader-doc.rar
VC运行库：http://www.microsoft.com/downloads/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf%20
联系信箱：[email protected]
联系QQ：1085617561
1. 概述
部分MP3文件的标题，艺术家，专辑，评论字段可能包含乱码。如果提交包含乱码的字段会导致WEB服务器无法正常解析Form表单中的数据。所以请根据需求提交字段。了解控件向WEB服务器提交的详细字段请点击此处
2. 整合到现有系统中
主要步骤：
1.上传文件
2.修改classid和codebase地址
2.1. 上传文件
上传下列文件和文件夹
js
css
Mp3Uploader.cab
说明：
请不要手动解压Mp3Uploader.cab文件，请将完整的Mp3Uploader.cab文件上传到服务器中。IE浏览器会自动安装CAB。CAB文件相当于是一个自动安装控件的脚本。
2.2. 修改classid和codebase地址
打开js\Mp3Uploader.js文件,修改控件的classid及codebase地址。
//加载HttpDownloader控件
this.Load = function()
{
//自动安装CAB
acx += '<div style="display:none;">';
//mp3文件上传控件
acx += '<object id="objHttpUpLoader" classid="clsid:4AB102D2-6A81-4D60-88CC-B028D9C4768C"';
acx += ' codebase="http://www.ncmem.com/products/http-uploader/demo2/HttpUploader.cab#version=1,0,0,45687" width="1" height="1" ></object>';
//文件夹选择控件
acx += '<object id="objHttpUploaderPartition" classid="clsid:E5FE2EA0-83DA-4D96-9180-52001CE5891D"';
acx += ' codebase="http://www.ncmem.com/products/http-uploader/demo2/HttpUploader.cab#version=1,0,0,45687" width="1" height="1" ></object>';
acx += '</div>';
}
说明：
为了避免与其它公司的控件产生冲突，每个控件的classid值都不相同。在购买产品后，我们会为每个公司单独生成序列号。
当控件升级(版本号变化)或CAB文件地址更改，必须修改codebase的地址。否则用户的IE浏览器将无法正常加载控件。
请确保codebase的地址与示例中的地址一致，version字符不能丢失，版本号中间不能有空格。
3. 升级控件
一般情况下，控件升级后Mp3Uploader.cab会更新，同时版本号也会更新。
主要步骤如下：
1. 重新上传Mp3Uploader.cab文件。
2. 更新Mp3Uploader.js中的版本号。
3.1. 更新Mp3Uploader.js中的版本号
打开ScreenCapture.js文件，查找以下代码，将version=后面的版本号改为最新的版本号。
//加载HttpDownloader控件
this.Load = function()
{
//自动安装CAB
acx += '<div style="display:none;">';
//mp3文件上传控件
acx += '<object id="objHttpUpLoader" classid="clsid:4AB102D2-6A81-4D60-88CC-B028D9C4768C"';
acx += ' codebase="http://www.ncmem.com/products/http-uploader/demo2/HttpUploader.cab#version=1,0,0,45687" width="1" height="1" ></object>';
//文件夹选择控件
acx += '<object id="objHttpUploaderPartition" classid="clsid:E5FE2EA0-83DA-4D96-9180-52001CE5891D"';
acx += ' codebase="http://www.ncmem.com/products/http-uploader/demo2/HttpUploader.cab#version=1,0,0,45687" width="1" height="1" ></object>';
acx += '</div>';
}
说明：
更新版本号后，IE会自动提示用户安装最新的控件。
4. 用户接口
4.1. 配置上传地址
如果mp3上传控件需要在多个页面使用，推荐将上传地址写到Mp3Uploader.js中，前台不配置上传地址。这样可以使前台引用代码更加简洁。
<script type="text/javascript" language="javascript">
var uploaderMgr = new Mp3UploaderMgr();
uploaderMgr.Config["EncodeType"] = "GB2312";
uploaderMgr.Config["PostUrl"] = "http://localhost:1314/asp.net/upload.aspx";
//与文件同时上传的附加信息。
uploaderMgr.Fields["UserName"] = "test";
uploaderMgr.Fields["UserPass"] = "test";
window.onload = function()
{
uploaderMgr.Init();
};
</script>
注意：
PostUrl必须使用绝对路径，不能使用相对路径。下面的写法都是错误的。为了简化操作可以写一个JS函数，然后返回上传地址
uploaderMgr.Config["PostUrl"] = "/asp.net/upload.aspx";
uploaderMgr.Config["PostUrl"] = "/php/upload.php";
uploaderMgr.Config["PostUrl"] = "/jsp/upload.jsp";
4.2. 设置服务器编码方式
如果截屏控件需要在多个页面使用，推荐在Mp3Uploader.js中设置编码，前台只保留控件的引用代码。
<script type="text/javascript" language="javascript">
var uploaderMgr = new Mp3UploaderMgr();
uploaderMgr.Config["EncodeType"] = "GB2312";
uploaderMgr.Config["PostUrl"] = "http://localhost:1314/asp.net/upload.aspx";
//与文件同时上传的附加信息。
uploaderMgr.Fields["UserName"] = "test";
uploaderMgr.Fields["UserPass"] = "test";
window.onload = function()
{
uploaderMgr.Init();
};
</script>
4.3. 自定义图片上传完毕的事件
每一个MP3文件上传完毕后控件都会调用 Mp3Uploader_Complete函数。在整合到系统的过程中可根据实际情况修改逻辑。
//上传完成
function Mp3Uploader_Complete(obj)
{
obj.pButton.innerText = "";
obj.pProcess.style.width = "100%";
obj.pPercent.innerText = "100%";
obj.pMsg.innerText = "上传完成";
obj.State = FileUploaderState.Complete;
//从上传列表中删除
obj.Manager.RemoveUploadId(obj.FileID);
obj.PostNext();
}
4.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 = uploaderMgr.Form["f1"];
string f1 = uploaderMgr.Form["f2"];
string f1 = uploaderMgr.Form["f3"];
string f1 = uploaderMgr.Form["f4"];
string f1 = uploaderMgr.Form["f5"];
服务端(ASP)：
dim f1 : f1 = Request.Form("f1")
dim f2 : f2 = Request.Form("f2")
dim f3 : f3 = Request.Form("f3")
dim f4 : f4 = Request.Form("f4")
服务端(PHP)
$f1 = $_POST['f1'];
$f2 = $_POST['f2'];
$f3 = $_POST['f3'];
$f4 = $_POST['f4'];
5. JavaScript对象
5.1. Mp3Uploader对象
类型：JavaScript
文件上传对象的包装类，用户在实际的项目中只需要创建FileUploader对象，然后通过FileUploader对象就可以进行文件上传操作。
语法：
JavaScript（声明）
function Mp3Uploader() { }
方法
|
|
名称
|
说明
|
|
|
Ready
|
指示文件上传对象准备完毕
|
|
|
Post
|
开始上传文件
|
|
|
Stop
|
停止文件上传
|
|
|
PostNext
|
继续传输上传队列中的下一个文件
|
Ready方法
将上传任务状态设置为准备状态。
Post方法
开始上传文件。
说明：此函数将会自动实现断点续传功能。如果当前任务文件只上传了一半，则在下次开始时XSUploader组件将会自动定位到上次上传的位置继续上传数据。
Stop方法
停止上传任务。
PostNext方法
继续上传队列中下一个任务。
属性
|
|
名称
|
说明
|
|
|
pMsg
|
消息对象。
|
|
|
pProcess
|
上传进度条对象
|
|
|
pPercent
|
上传进度百分比。
|
|
|
pButton
|
控制按钮
|
|
|
TimeOutID
|
定时器
|
|
|
Ext
|
文件扩展名。例：
|
|
|
LocalFile
|
不包含路径的文件名称。例：qq.exe
|
|
|
LocalFileName
|
包含完整路径的本地文件名称。例：C:\qq.exe
|
|
|
FileLength
|
文件大小。以字节为单位。
1MB=1024KB
1KB=1024byte
|
5.2. Mp3UploaderMgr对象
类型：JavaScript
MP3上传文件管理类。
方法
AddFile方法
添加一个文件到上传对列中
语法：
void AddFile(fid);
参数：
fid
新上传任务的唯一文件ID，此ID用来区域不同的上传任务。
PostFirst方法
开始上传队列中的第一个文件。
语法：
void PostFirst()
Exist方法
检查上传队列中是否存在指定文件。
说明：此函数是根据本地文件的完整路径来检测的。
bool Exist();
返回值：
true
表示存在。
false
不存在。
SetFileFilter方法
设置过滤的文件类型。
语法：
void SetFileFilter(filter)
参数：
filter 文件类型字符串。由逗号分隔。示例：exe,jpg,php
属性
Fields属性
上传时附加的额外信息。
注意：此属性暂时不支持中文字符串。
以下示例演示上传时添加用户名和密码的额外信息：
var uploaderMgr = new Mp3UploaderMgr();
uploaderMgr.Fields["UserName"] = "test";
uploaderMgr.Fields["UserPass"] = "test";
Config属性
提供全局配置信息。
语法：
this.Config = {
"EncodeType" : "UTF-8"
"PostUrl" : "http://www.ncmem.com/upload.aspx"
};
EncodeType值
服务器编码方式。
此属性必须和web.config配置文件对应。
如果服务器端编码方式是UTF-8
<globalization requestEncoding="utf-8" responseEncoding="utf-8"/>
则客户端也必须是UTF-8
var uploaderMgr = new Mp3UploaderMgr();
uploaderMgr.Config["EncodeType"] = "UTF-8";
如果服务端编码方式是GB2312
<globalization requestEncoding="gb2312" responseEncoding="gb2312"/>
则客户端也必须是GB2312
var uploaderMgr = new Mp3UploaderMgr();
uploaderMgr.Config["EncodeType"] = "GB2312";
PostUrl值
接收处理上传文件的URL。
6. ActiveX对象
6.1. Xproer.Mp3Partition对象
CLSID：E5FE2EA0-83DA-4D96-9180-52001CE5891D
类型：ActiveX
多文件选择对象。弹出一个文件选择对话框，为用户提供选择多个MP3文件的功能。
方法
|
|
名称
|
说明
|
|
|
ShowDialog
|
弹出文件选择对话框
|
|
|
GetSelectedFiles
|
获取用户选择的文件列表
|
GetSelectedFiles方法
获取用户选择的文件列表数组。
示例
下面的代码示例将会创建一个文件选择框，并弹出用户所选择的文件名称。
JavaScript：
<script type="text/javascript" language="javascript">
function ShowSelectFileDlg()
{
var uploaderMgr = new Mp3UploaderMgr();
var obj = new ActiveXObject(manager.ActiveX["Partition"]);;//创建文件选择对话框
if (!obj.ShowDialog()) return;
var list = obj.GetSelectedFiles();//获取用户选择的文件
if (list == null) return;
if (list.lbound(1) == null) return;
for (var index = list.lbound(1); index <= list.ubound(1); index++)
{
if (!uploaderMgr.Exist(list.getItem(index)))
{
uploaderMgr.AddFile(list.getItem(index));
}
}
uploaderMgr.PostFirst();
}
</script>
6.2. Xproer.Mp3Uploader对象
CLSID：4AB102D2-6A81-4D60-88CC-B028D9C4768C
类型：ActiveX
MP3文件上传对象，负责解析MP3文件并上传。
属性
|
|
名称
|
说明
|
|
|
FileID
|
文件ID。必须唯一。
|
|
|
LocalFile
|
包含完整路径的本地文件名称。例：D:\QQ.exe
|
|
|
IP
|
处理请求的URL地址。例：http://www.ncmem.com/upload.aspx
|
事件
|
|
名称
|
说明
|
|
|
OnComplete
|
在文件上传完成时发生
|
|
|
OnPost
|
每当向服务器传输成功一部分数据时发生
|
|
|
OnStop
|
在文件上传停止时发生
|
|
|
OnError
|
在文件上传出现错误时发生
|
OnComplete事件
传输完成事件，当文件成功上传完毕后，系统将会调用此方法
参数：
arguments[0]
文件ID。
OnPost事件
传输数据事件。每当XSUploader插件成功向服务器传输二进制数据后将触发此事件。
参数：
arguments[0]
文件ID，用于区分不同的上传任务
arguments[1]
已上传字节
arguments[2]
传输速度
arguments[3]
已上传百分比。
OnStop事件
传输停止事件，当上传任务停止时系统将会自动调用此方法
参数：
arguments[0]
文件ID。
OnError事件
传输错误事件，当传输出现错误时系统将会自动调用此事件。
参数：
arguments[0]
文件ID。
arguments[1]
错误码
| "0":
|
"启动网络环境错误",
|
| "1":
|
"SOCKET错误",
|
| "2":
|
"打开SOCKET错误",
|
| "3":
|
"创建SOCKET错误",
|
| "4":
|
"连接服务器错误",
|
| "5":
|
"发送数据错误",
|
| "6":
|
"未设置本地文件",
|
| "7":
|
"本地文件不存在",
|
| "8":
|
"不能读取本地文件",
|
| "9":
|
"公司未授权",
|
| "10":
|
"未设置IP",
|
| "11":
|
"域名未授权",
|
示例
下面的代码将会创建一个上传项，并将本地C盘下的myfile.txt文件上传到服务端，并以myfile.txt保存。
JavaScript
var upFile = new Mp3Uploader(1);//这里创建了一个文件上传任务,并将文件ID设置为1
upFile.ATL.PostUrl = "http://www.ncmem.com/upload.aspx";//设置上传地址
upFile.ATL.LocalFileName = "E:\\test.mp3";//设置要上传的本地文件
//设置事件，这些事件必须设置，否则上传任务将无法执行
upFile.ATL.OnComplete = function() { }
upFile.ATL.OnPost = function() { }
upFile.ATL.OnStop = function() { }
upFile.ATL.OnError = function() { }
upFile.Post(); //开始上传
6.3. Xproer.Mp3Droper对象
CLSID：98817C69-6551-4A34-BC78-365C538DA9E4
类型：ActiveX
文件拖放面板，为用户提供文件的拖放功能。
事件
OnFileDrop事件
文件拖放事件。当用户从资源管理器向拖放面板中拖放文件时此事件将会自动被调用。
参数：
arguments[0]
文件列表数组
示例
<HTML>
<HEAD>
<TITLE>New Page</TITLE>
</HEAD>
<BODY>
<OBJECT ID="FilePanel1" WIDTH=192 HEIGHT=192 CLASSID="clsid: AF145FF6-EF91
</OBJECT>
<div id="divFileLister"></div>
<script language="javascript" type="text/javascript">
var obj = document.getElementById("FilePanel1");
obj.OnFileDrop = EventFileDrop;
function EventFileDrop()
{
var lister = document.getElementById("divFileLister");
var list = obj.GetSelectedFiles();//获取选择的文件
for (var index = list.lbound(1); index <= list.ubound(1); ++index)
{
lister.innerHTML += "<p>文件名：" + list.getItem(index) + "</p>";
}
}
</script>
</BODY>
</HTML>
7. 数据库设计
7.1. MS Access
| 序号
|
列名
|
数据类型
|
长度
|
小数位
|
标识
|
主键
|
允许空
|
默认值
|
说明
|
| 1
|
ID
|
int
|
|
|
是
|
是
|
否
|
|
自动编号
|
| 2
|
mp3_name
|
varchar
|
50
|
|
|
|
是
|
|
|
| 3
|
mp3_file
|
varchar
|
255
|
|
|
|
是
|
|
文件名称
|
| 4
|
mp3_title
|
varchar
|
50
|
|
|
|
是
|
|
标题
|
| 5
|
mp3_artist
|
varchar
|
50
|
|
|
|
是
|
|
艺术家
|
| 6
|
mp3_album
|
varchar
|
50
|
|
|
|
是
|
|
专辑
|
| 7
|
mp3_year
|
int
|
|
|
|
|
是
|
0
|
|
| 8
|
mp3_comment
|
varchar
|
255
|
|
|
|
是
|
|
评论
|
| 9
|
mp3_track
|
int
|
|
|
|
|
是
|
0
|
音轨
|
| 10
|
mp3_genre
|
varchar
|
50
|
|
|
|
是
|
|
类型
|
| 11
|
mp3_bitrate
|
int
|
|
|
|
|
是
|
0
|
比特率
|
| 12
|
mp3_samplerate
|
int
|
|
|
|
|
是
|
0
|
采样率
|
| 13
|
mp3_channels
|
int
|
|
|
|
|
是
|
0
|
声道
|
| 14
|
mp3_time
|
varchar
|
7
|
|
|
|
是
|
|
播放时间 1:12:12
|
| 15
|
mp3_size
|
int
|
|
|
|
|
是
|
0
|
文件大小
|
7.2. MySQL
| 字段
|
类型
|
Null
|
默认
|
| ID
|
int(11)
|
是
|
NULL
|
| mp3_name
|
varchar(50)
|
是
|
NULL
|
| mp3_file
|
varchar(255)
|
是
|
NULL
|
| mp3_title
|
varchar(50)
|
是
|
NULL
|
| mp3_artist
|
varchar(50)
|
是
|
NULL
|
| mp3_album
|
varchar(50)
|
是
|
NULL
|
| mp3_year
|
int(11)
|
是
|
NULL
|
| mp3_comment
|
varchar(255)
|
是
|
NULL
|
| mp3_track
|
int(11)
|
是
|
NULL
|
| mp3_genre
|
varchar(50)
|
是
|
NULL
|
| mp3_bitrate
|
int(11)
|
是
|
NULL
|
| mp3_samplerate
|
int(11)
|
是
|
NULL
|
| mp3_channels
|
int(11)
|
是
|
NULL
|
| mp3_time
|
varchar(7)
|
是
|
NULL
|
| mp3_size
|
int(11)
|
是
|
NULL
|
创建语句
CREATE TABLE `Mp3Uploader`.`mp3_files` (
`ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`mp3_name` VARCHAR( 50 ) NOT NULL ,
`mp3_file` VARCHAR( 255 ) NOT NULL ,
`mp3_title` VARCHAR( 50 ) NOT NULL ,
`mp3_artist` VARCHAR( 50 ) NOT NULL ,
`mp3_album` VARCHAR( 50 ) NOT NULL ,
`mp3_year` INT NOT NULL ,
`mp3_comment` VARCHAR( 255 ) NOT NULL ,
`mp3_track` INT NOT NULL ,
`mp3_genre` VARCHAR( 50 ) NOT NULL ,
`mp3_bitrate` INT NOT NULL ,
`mp3_samplerate` INT NOT NULL ,
`mp3_channels` INT NOT NULL ,
`mp3_time` VARCHAR( 7 ) NOT NULL ,
`mp3_size` INT NOT NULL
) ENGINE = INNODB CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT = 'MP3文件表'
8. UI模板
您可以根据实际需求来修改以下模板。
HTML:
<div class="UploaderItem" id="UploaderTemplate">
<div class="UploaderItemLeft">
<div class="FileName top-space">Mp3Uploader程序开发.pdf</div>
<div class="ProcessBorder top-space">
<div class="Process"></div>
</div>
<div class="PostInf top-space">已上传:15.3MB 速度:20KB/S 剩余时间:10:02:00</div>
</div>
<div class="UploaderItemRight">
<a class="Btn" href="javascript:void(0)">取消</a>
<div class="ProcessNum">35%</div>
</div>
</div>
9. HTML示例
<!DOCTYPE html PUBLIC "-//W
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Mp3文件上传控件演示页面</title>
<link href="css/HttpDownloader.css" type="text/css" rel="Stylesheet"/>
<script src="js/HttpDownloader.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" value="下载测试文件" onclick="StartDown()" />
<script type="text/javascript" language="javascript">
var downerMgr = new FileDownloaderMgr();
downerMgr.Config["Folder"] = "D:\\";
window.onload = function()
{
downerMgr.Init();
};
function StartDown()
{
downerMgr.AddFile("http://www.ncmem.com/download/WordPaster-FCKEditor2x-ext.rar");
//downerMgr.AddFile("http://www.ncmem.com/images/ico-ftp.jpg");
//downerMgr.AddFile("http://www.ncmem.com/images/ico-up.jpg");
//downerMgr.AddFile("http://www.ncmem.com/images/ico-capture.jpg");
//downerMgr.AddFile("http://www.ncmem.com/images/ico-imageuploader.gif");
//downerMgr.AddFile("http://www.ncmem.com/images/ico-wordpaster.gif");
downerMgr.PostFirst();
}
//选择文件夹
function ShowFolderDlg()
{
var obj = new ActiveXObject(downerMgr.ActiveX["Partition"]);
if (!obj.ShowFolder()) return;
downerMgr.Config["Folder"] = obj.Folder;
}
</script>
</body>
</html>
10. 相关问题
10.1. Windows XP/2003系统无法注册控件
请先下载安装VC库：http://www.microsoft.com/downloads/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf%20
10.2. ASP上传大文件出现”不允许操作”的错误
问题描述：
超过200K系统就提示：
Request 对象 错误 'ASP 0104 : 80004005'
不允许操作
/Inc/upfile_class.asp，行 62
其中行62指的是:oUpFileStream.Write Request.BinaryRead (Request.TotalBytes)
问题分析：
这个问题是由于Windows 2003 IIS6.0默认支持的文件大小为200KB导致的。
解决方法：
1. 先在服务里关闭iis admin service服务
2. 找到windows\system32\inetsrv\下的metabase.xml
3. 用记事本打开 C:\windows\sytem32\inetserv\metabase.xml
寻找字串 AspMaxRequestEntityAllowed 将 204800 (200KB) 改成你要的大小
这是针对上传的部分
如果你在下載的時候,大的文件也有问题的话,可以修改其中的 AspBufferingLimit ,预设的是 4MB
4. 重启iis admin service服务,不是重启电脑
11. 服务端支持
11.1. Mp3Uploader提交的字段
Mp3Uploader控件在上传MP3文件时会以POST方式向服务器提交以下字段：
| 字段名称
|
描述
|
| mp3
|
MP3文件
|
| title
|
标题
|
| artist
|
艺术家
|
| album
|
专辑
|
| year
|
年份
|
| comment
|
评论
|
| track
|
轨道
|
| genre
|
类型
|
| bitrate
|
比特率
|
| samplerate
|
采样率
|
| channels
|
声道
|
| time
|
播放时长
|
注意：
部分MP3文件的标题，艺术家，专辑，评论字段可能包含乱码。如果提交包含乱码的字段会导致WEB服务器无法正常解析Form表单中的数据。所以请根据需求提交字段。