图片压缩后上传！Flash图片极速上传！提供参数控制！
需求【示例源码下载】
如果用户使用数码相机照的照片一般都会在很大！（2M~5M）
一般网站都会在用户上传照片后对照片进行适当压缩，以提高网页浏览时照片的加载速度。
如果可以在客户端对照片压缩后上传，可以节省带宽，并且也减轻服务器压力。会有很好的用户体验！以前实现这样的功能都需要借助上传组件！
其实使用Flash 10.0就可以实现照片压缩后上传。
原理
首先使用Flash的上传功能让用户选择要上传的照片。
加载选择照片的数据到Flash中。(此功能需要Flash10.0以上版本)
将数据加载到Flash的image组件中。
将image按照合适大小进行缩放。
在对image的显示区域进行Flash截图存入Bitmap。
将Bitmap转换为Jpg格式数据。
使用post方式将Jpg数据发送到服务器端！
调用方法
- <!DOCTYPE html>
- <html>
- <head>
- <title>图片压缩上传</title>
- <script type="text/javascript" src="swfobject.js"></script>
- </head>
- <body onload="showFlash();">
- <div id="divFlash">
- 加载中
- </div>
- <script type="text/javascript">
- function showFlash() {
- var params = {
- serverUrl: "saveImage.aspx",
- jsFunction: "flashReturn",
- imgWidth:500,
- imgHeight:500,
- imgQuality:80,
- btnText:'图 片'
- }
- swfobject.embedSWF("imgZipUpload.swf", "divFlash", "100", "30", "10.0.0", "expressInstall.swf", params);
- }
- function flashReturn(type, str) {
- if(type == 'error')
- {
- alert(str);
- }
- else if (type == 'complete')
- {
- var img1 = document.getElementById('img1');
- img1.style.display = "block";
- img1.src = str;
- }
- }
- </script>
- <img id="img1" style="display:none;" />
- </body>
- </html>
Flash参数说明
| 参数 | 名称 | 是否必填 | 默认值 | 取值范围 |
|---|---|---|---|---|
| serverUrl | 服务器端响应地址 | 必填项 | ||
| imgWidth | 图片缩放宽度 | 选填 | 100 | 10-2000 |
| imgHeight | 图片缩放高度 | 选填 | 100 | 10-2000 |
| imgQuality | 图片质量 | 选填 | 80 | 1-100 |
| jsFunction | 回调JS函数 | 选填 | ||
| btnText | 上传按钮文字 | 选填 | 上 传 |
说明：
服务器端页面(Asp.net)
