Posted on 2010-12-26 16:02
xiao张 阅读(1455)
评论(19) 编辑 收藏 所属分类:
Flash Flex,
Javascript 
图片压缩后上传！Flash图片极速上传！提供参数控制！
需求
如果用户使用数码相机照的照片一般都会在很大！（2M~5M）
一般网站都会在用户上传照片后对照片进行适当压缩，以提高网页浏览时照片的加载速度。
如果可以在客户端对照片压缩后上传，可以节省带宽，并且也减轻服务器压力。会有很好的用户体验！以前实现这样的功能都需要借助上传组件！
其实使用Flash 10.0就可以实现照片压缩后上传。
原理
- 首先使用Flash的上传功能让用户选择要上传的照片。
- 加载选择照片的数据到Flash中。(此功能需要Flash10.0以上版本)
- 将数据加载到Flash的image组件中。
- 将image按照合适大小进行缩放。
- 在对image的显示区域进行Flash截图存入Bitmap。
- 将Bitmap转换为Jpg格式数据。
- 使用post方式将Jpg数据发送到服务器端！
调用方法
05 |
<script type="text/javascript" src="swfobject.js"></script> |
07 |
<body onload="showFlash();"> |
12 |
<script type="text/javascript"> |
13 |
function showFlash() { |
15 |
serverUrl: "saveImage.aspx", |
16 |
jsFunction: "flashReturn", |
22 |
swfobject.embedSWF("imgZipUpload.swf", "divFlash", "100", "30", "10.0.0", "expressInstall.swf", params); |
25 |
function flashReturn(type, str) { |
30 |
else if (type == 'complete') |
32 |
var img1 = 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(""); 上传成功返回数据
实例及源码下载：https://files.cnblogs.com/zjfree/imgZipUpload.rar
