版权所有 2009-2011 北京新颖网络
保留所有权利
产品博客:http://www.cnblogs.com/xproer/
官方网站:http://www.ncmem.com
产品首页:http://www.ncmem.com/webplug/passwordeditor/index.aspx
在线演示:http://www.ncmem.com/products/passwordeditor/demo/index.html
开发文档:http://www.cnblogs.com/xproer/archive/2011/11/27/2264969.html
产品介绍:http://www.cnblogs.com/xproer/archive/2011/11/27/2264971.html
升级日志:http://www.cnblogs.com/xproer/archive/2011/11/27/2264965.html
示例下载:http://www.ncmem.com/download/PasswordEditor-demo.rar
文档下载:http://www.ncmem.com/download/PasswordEditor-doc.rar
联系信箱:1085617561@qq.com
联系QQ:1085617561
1. 集成到现有系统中
主要步骤:
1.上传控件相关的文件。
2.修改cab文件下载地址及classid序列号。
3.修改控件上传地址及编码。
1.1. 上传文件
PasswordEditor.js
PasswordEditor.cab
注意:
请不要手动解压PasswordEditor.cab文件,请此文件上传到服务器中,IE浏览器会自动下载并安装控件。CAB文件是一个控件自动安装包。
1.2. 修改cab文件下载地址和classid序列号
打开PasswordEditor.js文件查找以下代码,修改codebase的地址。codebase指PasswordEditor.cab在Web服务器中的位置。
function SetupCapture() {
var acx = "<object id=\"FilePanel1\" classid=\"clsid:60CBDBD3-D3FE-4424-8C4D-07FD9433E2D5\"";
acx += "codebase=\"http://www.ncmem.com/products/passwordeditor/demo/PasswordEditor.cab#version=1,4,8,45272\" width=\"1\" height=\"1\"></object>";
document.write(acx);
}
说明:
classid是唯一的,它的作用是避免与其它公司的控件产生冲突。购买产品后我们会为每个公司生成一个唯一的classid号。
codebase也可以使用相对路径。如果PasswordEditor.cab在Web服务器的根目录中,codebase也可以写为/PasswordEditor.cab#version=1,4,8,45272
如果公司的域名是www.qq.com,PasswordEditor.cab文件在服务器的根目录中,那么codebase应该为http://www.qq.com/PasswordEditor.cab#version=1,4,8,45272。每个公司应该将codebase改为自已服务器的地址。
注意:
当控件升级(版本号修改)或CAB文件位置改变,必须修改PasswordEditor.js中的代码。否则用户的IE浏览器不会安装最新的控件。
1.3. 修改控件的上传地址
打开index.html,将PostUrl改为实际的上传地址:
pwdEditor.Config["PostUrl"] = "http://www.ncmem.com/products/passwordeditor/demo/check.aspx";
pwdEditor.Config["EncodeType"] = "GB2312";
说明:
如果需要在多个页面使用安全控件,建议只在PasswordEditor.js中修改上传地址。而不要在前台页面中修改。这样可以使前台引用安全控件的代码更加简洁。
注意:
PostUrl必须使用绝对路径,不能使用相对路径。下面的路径都是错误的:
/upload.php
/web/check.php
2. 升级控件
一般情况下,控件升级后PasswordEditor.cab会更新,同时版本号也会更新。
主要步骤如下:
1. 重新上传PasswordEditor.cab文件。
2. 更新PasswordEditor.js中的版本号。
2.1. 更新PasswordEditor.js中的版本号
打开ScreenCapture.js文件,查找以下代码,将version=后面的版本号改为最新的版本号。
this.Load = function()
{
var acx = '<object id="objPasswordEditor" classid="clsid:B10327CB-56EC-43D9-BED0-C91E4AE8F42E"';
acx += ' codebase="/PasswordEditor.cab#version=1,6,20,45587" width="1" height="1"></object>';
document.write(acx);
};
说明:
更新版本号后,IE会自动提示用户安装最新的控件。
3. 用户接口
3.1. 配置数据上传地址
<script type="text/javascript" language="javascript">
var pwdEditor = null;
window.onload = function() {
pwdEditor = new PasswordEditor();
//设置数据上传地址
pwdEditor.Config["PostUrl"] = "http://localhost:1830/asp.net/check.aspx";
}
</script>
注意:
PostUrl必须使用绝对路径,不能使用相对路径。下面的写法都是错误的。
manager.Config["PostUrl"] = "/asp.net/check.aspx";
manager.Config["PostUrl"] = "/php/check.php";
manager.Config["PostUrl"] = "/jsp/check.jsp";
3.2. 自定义加密方式
目前安全控件支持MD5及BASE64加密方式。
<script type="text/javascript" language="javascript">
var pwdEditor = null;
window.onload = function() {
pwdEditor = new PasswordEditor();
//设置数据上传地址
pwdEditor.Config["EncryptionType"] = "md5";
}
</script>
3.3. 设置服务器编码方式
<script type="text/javascript" language="javascript">
var pwdEditor = null;
window.onload = function() {
pwdEditor = new PasswordEditor();
//设置服务器编码方式,支持GB2312/UTF-8
pwdEditor.Config["EncodeType"] = "GB2312";
}
</script>
3.4. 自定义数据验证成功的事件
//事件-传输完毕
function PasswordEditor_Complete(obj)
{
obj.State = ScreenCaptureState.Complete;
var msg = obj.ATL.Response;
//添加其它的处理代码
}
3.5. 设置附加信息
附加信息的作用就是在上传图片的同时向服务器提交额外的字段信息。比如当用户向服务器上传截图时,服务器需要知道是哪位用户上传的截图,这时可以将用户ID添加到附加信息中,这样服务器在获取截图信息的同时也能够根据附加信息知道是哪位用户上传的截图。
客户端:
pwdEditor.Fields["UserName"] = "test";
服务端:
string fname = Request.Form["UserName"];
开发人员可以根据自已的业务需求来扩展附加信息:
客户端:
pwdEditor.Fields["f1"] = "f1";
pwdEditor.Fields["f2"] = "f2";
pwdEditor.Fields["f3"] = "f3";
pwdEditor.Fields["f4"] = "f4";
pwdEditor.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"];
4. 快速开始
设置服务器编码格式
以ASP.NET项目为例。在ASP.NET项目中修改服务器的编码格式是根据web.config中的设置确定的。
<globalization requestEncoding="utf-8" responseEncoding="utf-8"/>
设置插件的编码格式
打开web.config文件,修改下面的字段信息。
manager.Config["EncodeType"] = "UTF-8";//注意,此格式必须与服务器端的设置对应。默认为UTF-8
设置接收处理上传的文件页面
manager.Config["PostUrl"] =