学步园

版权所有 2009-2012 武汉命运科技有限公司

保留所有权利

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

官方博客：http://www.cnblogs.com/xproer

产品首页：http://www.ncmem.com/webplug/image-uploader/index.aspx

在线演示-标准版：http://www.ncmem.com/products/image-uploader/demo/index.html

在线演示-专业版：http://www.ncmem.com/products/image-uploader/demo-pro/index.html

在线演示-高级版：http://www.ncmem.com/products/image-uploader/demo-pre/index.html

开发文档-ASP.NET(C#)：http://www.cnblogs.com/xproer/archive/2011/01/09/1931278.html

开发文档-JSP：http://www.cnblogs.com/xproer/archive/2011/05/20/2051887.html

产品介绍：http://www.cnblogs.com/xproer/archive/2010/08/09/1796077.html

升级日志：http://www.cnblogs.com/xproer/archive/2010/10/06/1844816.html

资源下载-标准版：CAB安装包，开发文档，ASP示例,ASP.NET示例,JSP示例(GB2312),JSP示例(UTF8),PHP示例

示例下载-企业版：ASP示例,ASP.NET示例,JSP示例,PHP示例,

联系邮箱：1085617561@qq.com

联系QQ：1085617561

1.1. PHP

1. 测试包布署说明

主要步骤如下：

1.将ImageUploader.cab上传到测试服务器中。

2.修改测试服务器中的ImageUploader.js配置信息。

2. 正式包布署说明

主要步骤如下：

1.将ImageUploader.cab上传到项目服务器中。

2.修改项目服务器中的ImageUploader.js配置信息。

1. 升级控件

一般情况下，控件升级后ImageUploader.cab会更新，同时版本号也会更新。再次打开IE浏览器时，会出现类似如下提示：

主要步骤如下：

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

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

1.1. 更新ImageUploader.js中的版本号

打开ImageUploader.js文件，查找以下代码，将version=后面的版本号改为最新的版本号。

     this.Config = {

         "EncodeType"       : "GB2312"

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

         , "ThumbWidth"     : 0//缩略图宽度，必须同时设置缩略图高度

         , "ThumbHeight"    : 0//缩略图高度，必须同时设置缩略图宽度

         , "ImageUploadType": ""//图片上专格式：JPG,PNG,GIF,BMP，留空则按实际图片格式上传。

         , "JpegQuality"    : 100//JPG图片质量。0~100。此数值越小，图片大小越小

         , "FileSizeLimit"  : 0//文件大小限制，以字节为单位。0表示不限制。

         , "Watermark"      : false//是否启用水印

         , "ClsidUploader"  : "2025D1D7-921B-49bd-8073-7C64ABFDFFD4"

         ,"ProjID"          : "Xproer.ImageUploader"

         , "AppPath"        : "/"    //根目录："/"，子目录："/web/"

         , "CabPath"        : "http://www.ncmem.com/products/image-uploader/demo/ImageUploader.cab#version=2,7,56,64575"

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

     };

说明：

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

1.      ImageUploader用户接口

1.1.   设置服务器编码

var ImageUploader = new ImageUploader ("acxImageUploader");//控件object对象的ID

ImageUploader.Config["EncodeType"] = "GB2312";//上传页面的编码格式为GB2312

 

1.2.   图片上传地址

var ImageUploader = new ImageUploader ("acxImageUploader");//控件object对象的ID

ImageUploader.Config["PostUrl"] = "http://www.ncmem.com/upload.aspx";//设置图片上传地址。

 

1.3.   缩略图

1.3.1.    配置控件自动生成缩略图

var ImageUploader = new ImageUploader ("acxImageUploader");//控件object对象的ID

ImageUploader.Config["ThumbWidth"] = 100;//将缩略图宽度设为100

ImageUploader.Config["ThumbHeight"] = 100;//将缩短略图高度设为100

 

1.4.   图片格式转换

var ImageUploader = new ImageUploader ("acxImageUploader");//控件object对象的ID

ImageUploader.Config["ImageUploadType"] = "JPG";//将图片类型设为JPG，在上传前所有图片格式将会被转换为JPG格式。

 

1.5.   设置附加信息

var ImageUploader = new ImageUploader ("acxImageUploader");

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

ImageUploader.Fields["UserID"] = "100";

ImageUploader.Init();

 

1.6.   设置默认打开的文件夹

var ImageUploader = new ImageUploader ("acxImageUploader");

ImageUploader.SetDefaultFolder("E:\\图像资源\\aaa");

ImageUploader.Init();

 

1.7.   获取上传完的图片地址

上传控件提供了一个AfterImagesPosted事件，开发人员只需要为此事件指定一个函数指针，这样开发人员就能够自定义处理图片上传完成后的逻辑。

注意：

     在IE6和IE7浏览器中，当控件将所有图片上传完毕后请不要立即进行跳转的操作，立即跳转操作可能导致浏览器被锁住。这个问题是由于IE6浏览器没有处理控件回调通知消息导致的。

     如果需要在所有图片上传完毕后进行跳转链接操作，请使用定时器实现。一般将时间设为1秒钟

//所有图片传输完毕

function AfterImagesPosted(obj)

{

     var imgs = obj.Com.GetPostedFiles();

     if (imgs == null) return;

     var strImgs = new Array();

 

     for (var index = imgs.lbound(1); index <= imgs.ubound(1); index++)

     {

         strImgs.push(imgs.getItem(index));

     }

 

     //在IE6或IE7中如果希望在所有图片上传完后进行跳转链接操作，应该使用定时器来实现。

     setTimeout("http://www.ncmem.com/",1000);

}

 

//跳转链接

function GoToUrl(url)

{

     window.location.href = url;

}

   

 

1.1.   PHP

此文件主要用来接收控件上传的图片文件，保存到服务器中，并将图片地址返回给控件。

 

upload.php

<?php

$uploadDir = dirname(__FILE__).'/uploade';

 

if(!file_exists($uploadDir)){

     mkdir($uploadDir);

}

//接收控件上传的文件，这里使用$_FILES[0]的方式取文件，不能使用$_FILES['img']的方式获取

$uploadfile = $uploadDir."/".substr(md5($_FILES[0]['tmp_name']),3).".jpg";

//echo $uploadfile;

if (!move_uploaded_file($_FILES[0]['tmp_name'],$uploadfile)){

     exit('upload error!');

}

 

//2010-1-16_1226481253.jpg

//注意：这里的时间应该包含毫秒。因为控件可能在一秒钟内同时上传多张图片，

//如果没有加上毫秒，那么同时上传的两张图片名称就会相同。

echo '/upload/test.gif';

 

//必须要输出Content-Length值，注意Content-Length冒号后面有一个空格

header('Content-Length: 'ob_get_length());

?>

 

 

2.      JavaScript对象

2.1.   ImageUploader对象

类型：JavaScript

图片上传插件的封装类。提供图片上传插件的信息配置及初始化功能。

 

方法

Init方法

初始化图片上传插件。

 

语法

void Init();