图片压缩后上传[Flash]

本文介绍如何使用Flash 10.0实现在客户端对图片进行压缩后再上传的功能,以节省带宽并减轻服务器压力,提升用户体验。文章提供了具体的实现步骤及示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

图片压缩后上传!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 上传按钮文字 选填 上 传

说明:

用户上传照片会等比压缩在指定范围内。
但当用户照片尺寸必需要缩放尺寸小时,不对用户照片进行缩放。
上传时只支持上传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(""); 上传成功返回数据
实例及源码下载:[url]http://files.cnblogs.com/zjfree/imgZipUpload.rar[/url]

后记:

欢迎使用我的多文件版本,支持图片压缩后上传,支持任意格式文件。

[url]http://seaskys.iteye.com/blog/1579486[/url]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值