跳过导航链接
技术文档
·网站建设
·软件使用
·图形设计
·程序开发
·网络应用
·电脑技巧
 
公司介绍
·全景旅行者说明
·全景旅行者概念海报
·公司简介
·索仕SRCOS网络应用平台
·索仕网站管理系统
·影视广告制作
·联系我们
 
 

图片压缩后上传[Flash]

2011/1/5 9:50:53

 

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

需求

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

原理

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

调用方法

 

01 <!DOCTYPE html>
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         function showFlash() {
14             var params = {
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         function flashReturn(type, str) {
26             if(type == 'error')
27             {
28                 alert(str);
29             }
30             else if (type == 'complete')
31             {
32                 var img1 = 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 图片缩放宽度 选填 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(""); 上传成功返回数据

实例及源码下载:imgZipUpload.rar

本文附件:
imgZipUpload.rar
作者:xiao张 来源:博客园
 
 
 
昆明索仕科技开发有限公司 版权所有 Copyright© 2002-2010 Kunming Source Technology Exploitive Co.,LTD. All Rights Reserved.
电话:0871-5627877 业务QQ:163871  滇ICP备05000592号
本站基于:索仕网站信息管理系统建设 版本 2.0.4325