Web图片上传控件开发文档-JSP

示例下载：ASP,ASP.NET,JSP,PHP,

联系邮箱：1085617561@qq.com

联系QQ：1085617561

1. 搭建测试环境

1.2. JSP

1.导入JAR包

2.将index.html页面中的PostUrl改为测试服务器地址。

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;

}

2. JavaScript对象

2.1. ImageUploader对象

类型：JavaScript

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

方法

Init方法

初始化图片上传插件。

语法

void Init();

属性

Fields属性

上传时附加的额外信息。

注意：此属性暂时不支持中文字符串。

以下示例演示上传时添加用户名和密码的额外信息：

var ImageUploader = new ImageUploader ("acxImageUploader");

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

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

Config属性

提供全局配置信息。

语法：

this.Config = {

"EncodeType" : "UTF-8"

,"PostUrl" : "http://www.ncmem.com/upload.aspx"

,"ImageUploadType" : "JPG" //图片上传格式。JPG,PNG,GIF,BMP

, JpegQuality : 80 //JPG图片格式质量

, "ThumbWidth": "0"//缩略图宽度。如果为0表示使用图片的实际大小

, "ThumbHeight": "0"//缩略图高度。如果为0表示使用图片的实际大小

};

3. ActiveX对象

3.1. XproerWebPlug.ImageUploader对象

CLSID：FB86816A-F47E-4E87-9600-20D5BD57886E

类型：ActiveX

图片上传插件。

属性

JpegQuality

JPG图片质量。1-100

ImageUploadType

上传到服务器的图片格式。留空则表示按本地图片文件格式上传。

目前只支持下列格式：jpg,png,gif,bmp。

如果设置此格式，本地所有图片在上传时将会被自动转换为指定的格式。

PostUrl

图片上传地址。

EncodeType

服务器编码类型。

目前只支持下列编码：UTF-8,GB2312

1. 相关问题

1.1. 在Windows 2003上无法安装控件

这个是因为Windows 2003系统缺少VC运行库导致的，请下载VC运行库进行安装。安装时请关闭所有打开的上传IE页面，在安装完成后再重新打开上传页面。

VC运行库下载地址：http://www.microsoft.com/downloads/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf%20

1.2. 在IIS中ASP无法上传文件

问题分析：

可能是没有为虚拟目录设置Everone读写权限造成的。

解决方法：

为虚拟目录文件夹增加Everyone读写权限。步骤如下：

1.3. 手动卸载控件-Windows XP

主要步骤如下：

1.关闭所有IE

2.打开cmd

3.进入C:\Windows\System32

4.输入命令regsvr32 -u ImageUploader.dll

5.删除ImageUploader.dll文件。

1.4. 手动卸载控件-Windows 7(x86)

主要步骤如下：

1.关闭所有IE浏览器。

2.以管理员权限打开CMD

3.进入C:\Windows\System32文件夹

4.使用以下命令卸载控件

regsvr32 -u ImageUploader.dll

5.删除ImageUploader.dll文件。

1.5. 手动卸载控件-Windows 7(x64)

主要步骤如下：

1.关闭所有IE浏览器。

2.以管理员权限打开CMD

3.进入C:\Windows\SysWOW64文件夹

4.使用以下命令卸载控件

regsvr32 -u ImageUploader.dll

5.删除ImageUploader.dll文件。

1.6. 卸载控件-Chrome

1.打开扩展程序

2.删除插件

1.7. 卸载控件-Firefox

1.打开附加组件

2.删除组件

1.8. 用户无法注册控件

问题分析：此问题是由于用户系统缺少VC库导致的，

解决方法：

请先下载VC库并安装。

下载地址：http://www.microsoft.com/downloads/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf%20

1.9. 浏览器一直提供安装控件

问题分析：此问题是由于HttpUploader.js中的版本号不正确导致的。

解决方法：

1. 检查HttpUploader.js中所有控件的版本号是否正确。

2. 清除IE浏览器缓存，重新打开页面。

1.10. 加截控件错误

截图如下：

问题分析：

示例中控件的加截方式是通过下面的方式加截的：

document.write(object code);

这种方式在复杂的HTML中(比如ExtJS框架，复杂Iframe嵌套)可能会导致IE无法正常加截控件。

解决方法：

直接将控件的加截代码写到HTML中，让IE静态加截。示例代码如下：

<!--加截断点续传控件开始->

codebase="http://www.ncmem.com/products/http-uploader3/demo/HttpUploader.cab#version=2,5,28,54987" width="1" height="1" ></object>

codebase="http://www.ncmem.com/products/http-uploader3/demo/HttpUploader.cab#version=2,5,28,54987" width="1" height="1" ></object>

</div>

<!--加截断点续传控件结束->

注意：

以静态方式加截控件需要保证classid和codebase必须正确。否则IE无法加截控件。

来源：https://www.cnblogs.com/xproer/archive/2011/05/20/2051887.html

标签

web开发

传照片