您的位置:首页 > 其它

图片压缩后上传[Flash]

2010-12-27 13:46 323 查看

图片压缩后上传[Flash]

Postedon2010-12-2616:02xiao张阅读(1455)评论(19)编辑收藏所属分类:FlashFlex,Javascript


图片压缩后上传!Flash图片极速上传!提供参数控制!

需求

如果用户使用数码相机照的照片一般都会在很大!(2M~5M)
一般网站都会在用户上传照片后对照片进行适当压缩,以提高网页浏览时照片的加载速度。
如果可以在客户端对照片压缩后上传,可以节省带宽,并且也减轻服务器压力。会有很好的用户体验!以前实现这样的功能都需要借助上传组件!
其实使用Flash10.0就可以实现照片压缩后上传。

原理

首先使用Flash的上传功能让用户选择要上传的照片。
加载选择照片的数据到Flash中。(此功能需要Flash10.0以上版本)
将数据加载到Flash的image组件中。
将image按照合适大小进行缩放。
在对image的显示区域进行Flash截图存入Bitmap。
将Bitmap转换为Jpg格式数据。
使用post方式将Jpg数据发送到服务器端!

调用方法

viewsource

print?

01
<!DOCTYPEhtml>
02
<
html
>
03
<
head
>
04
<
title
>图片压缩上传</
title
>
05
<
script
type
=
"text/javascript"
src
=
"swfobject.js"
></
script
>
06
</
head
>
07
<
body
onload
=
"showFlash();"
>
08
09
<
div
id
=
"divFlash"
>
10
加载中...
11
</
div
>
12
<
script
type
=
"text/javascript"
>
13
functionshowFlash(){
14
varparams={
15
serverUrl:"saveImage.aspx",
16
jsFunction:"flashReturn",
17
imgWidth:500,
18
imgHeight:500,
19
imgQuality:80,
20
btnText:'图片'
21
}
22
swfobject.embedSWF("imgZipUpload.swf","divFlash","100","30","10.0.0","expressInstall.swf",params);
23
}
24
25
functionflashReturn(type,str){
26
if(type=='error')
27
{
28
alert(str);
29
}
30
elseif(type=='complete')
31
{
32
varimg1=document.getElementById('img1');
33
img1.style.display="block";
34
img1.src=str;
35
}
36
}
37
</
script
>
38
<
img
id
=
"img1"
style
=
"display:none;"
/>
39
</
body
>
40
</
html
>
Flash参数说明

参数名称是否必填默认值取值范围
serverUrl服务器端响应地址必填项
imgWidth图片缩放宽度选填10010-2000
imgHeight图片缩放高度选填10010-2000
imgQuality图片质量选填801-100
jsFunction回调JS函数选填
btnText上传按钮文字选填上传
说明:

用户上传照片会等比压缩在指定范围内。
但当用户照片尺寸必需要缩放尺寸小时,不对用户照片进行缩放。
上传时只支持上传jpg或bmp格式图片。因为png或gif如果是透明的在压缩后会变得不透明,所以不支持png或gif图片上传。
imgQuality图片质量数值越大质量越高,但文件也会越大。
jsFunction回调JS函数参数type,str type当为error时,str为错误信息当为complete,str为服务器端返回值
Flash中的按钮必须用户手动点击后才会弹出选择文件框!

服务器端页面(Asp.net)

Request.InputStream压缩后的jpg文件流
Request.Headers["fileName"]用户图片名称
Request.Headers["width"]压缩后宽度
Request.Headers["height"]压缩后高度
Response.Write("");上传成功返回数据

实例及源码下载:http://files.cnblogs.com/zjfree/imgZipUpload.rar
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: