图片压缩后上传[Flash]
Postedon2010-12-2616:02
xiao张阅读(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?
05 | < script type = "text/javascript" src = "swfobject.js" ></ script > |
07 | < body onload = "showFlash();" > |
12 | < script type = "text/javascript" > |
15 | serverUrl:"saveImage.aspx", |
16 | jsFunction:"flashReturn", |
22 | swfobject.embedSWF("imgZipUpload.swf","divFlash","100","30","10.0.0","expressInstall.swf",params); |
25 | functionflashReturn(type,str){ |
30 | elseif(type=='complete') |
32 | varimg1=document.getElementById('img1'); |
33 | img1.style.display="block"; |
38 | < img id = "img1" style = "display:none;" /> |
Flash参数说明
参数 | 名称 | 是否必填 | 默认值 | 取值范围 |
---|
serverUrl | 服务器端响应地址 | 必填项 | | |
imgWidth | 图片缩放宽度 | 选填 | 100 | 10-2000 |
imgHeight | 图片缩放高度 | 选填 | 100 | 10-2000 |
imgQuality | 图片质量 | 选填 | 80 | 1-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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理