图片压缩后上传!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(""); 上传成功返回数据
实例及源码下载:
http://files.cnblogs.com/zjfree/imgZipUpload.rar
后记:
欢迎使用我的多文件版本,支持图片压缩后上传,支持任意格式文件。
http://seaskys.iteye.com/blog/1579486
分享到:
相关推荐
这个项目用的是SwfUpload批量上传,这个第三方库在上传之前并没有进行图片压缩和上传后图片显示功能,本人改写了flash,实现了图片上传前首先压缩图片,2M的图片压缩后100K到200K,上传后进行图片显示。采用的是java...
批量上传图片,自定义压缩图片 jquery flash asp.net 压缩图片
改资源是将百度编辑器里面的FLASH批量上传组件扣出来单独做的一个批量图片上传,FLASH上传支持图片压缩反转等功能等
移动端图片上传不适合图片太大,传输工程中会出问题,毕竟移动的网络没有PC端好!在移动端图片上传最好使用压缩后在上传!而在ios中不支持Flash,故只能用html5文件压缩上传了
Flash多图片上传,可以压缩文件等等功能 带文件可以自由修改
录制的是wav,可以压缩mp3或者不压缩 只是使用的话,你只需要,看rec....这个flash还带播放功能,能播放压缩和没有压缩过的mp3。 使用方法见rec.php;支持ie,ff,chrome,safari。 只要5分,超值,其它的都要10分!!
解析jpeg中的meta信息 对于各种orientation做了正确的处理 同时压缩后上传保留图片的所有原始meta数据 多途径添加文件 支持文件多选 类型过滤 拖拽 文件&文件夹 图片粘贴功能 粘贴功能主要体现在当有图片...
图片一般都会占服务器的大部分空间,所以对图片进行压缩很重要,插件后台可开启图片压缩上传功能(指定论坛版块可自由关闭),图片压缩后便可节省服务器空间。 3、支持粘贴截图上传 在电脑端发布门户文章和论坛帖子...
这个是用Html5的fieldapi做的,客户端比例缩放,批量上传图片。减少服务器压力,客户端通过base64预览。并且支持直接调用手机相册摄像头 注意:代码里面做了判断,如果是pc端使用flash压缩,如果移动端使用H5进行缩放
带压缩功能上传图片,因为有人经常拍完就上传,几MB太大小,老是说慢 本swf在客户端自动压缩图片,图片质量为80; 有源码可以自己修改 也可以直接使用,里面有演示代码和php代码
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,...
无组件上传图片; 主要优势: 可靠性高:即使服务器停止了对CGI的支持,对外部的相册浏览也没有任何影响; 成本低廉:不需要任何数据库的支持,纯文本操作,不受操作系统、软件平台的限制; 系统重要文件...
追梦FLASH网站模板9.0白色优雅版,追梦工作室最引以为傲的一款设计,9系列模板界面简洁,更加大气,页面多种元素采用白色背板展示,页面切换效果简单不拖拉,界面内容更加商务化,同时拥有新闻,简介,图片和视频...
13.数据定时备份以及压缩功能 14.强大的评价功能,实现每个小游戏分开评价功能。 后台登陆地址:/admin/admin_login.asp 默认管理员:admin 密码:admin 演示: http://www.866la.com/ QQ:36023850
它主要功能是多文件上传,并提供图片客户端尺寸压缩。主要的特色是可以使用 Flash Gears HTML 5 Silverlight BrowserPlus HTML 4 等多项技术实现 我根据自己的需求做了些调整,美化了一下界面样式,调整了js代码,...
866啦FLASH小游戏是在线小游戏网站程序,全站生成HTML采用asp ...13.数据定时备份以及压缩功能14.强大的评价功能,实现每个小游戏分开评价功能。后台登陆地址:/admin/admin_login.asp 默认管理员:admin 密码:admin
V1.5功能: 1精品FLASH音乐网...2.修正了后台管理,新增可在线上传flash,图片功能 3.新增首页在线统计功能 4.后台登陆/admin/index.asp默认主页为/index.asp 5.默认管理员登陆用户和密码:admin密码admin888
38. 编辑器远程下载图片时加入对尺寸的压缩处理 39. 后台登录密码传输改为加密模式 40. 添加生成静态页进度条 41. 编辑器添加本地图片自动上传 42. 升级为CK4.16.1编辑器 43. 无用文件清理 44. 修改生成缩略图函数...
支持API 支持仅登录后上传 支持设置图片质量 支持压缩图片大小 支持文字/图片水印 支持设置图片指定宽/高 支持上传图片转换为指定格式 支持限制最低宽度/高度上传 支持上传其他文件格式 在线管理图片 支持网站统计 ...
v2.1更新: 改用v2.08 Beta 1上传算法,对大...更新算法,支持更广泛图片宽高获取,增加支持flash(未压缩格式)宽高获取; 增加Charset属性,便于国际化支持不同字符集编码; 修改发现的所有Bug; 许多细微优化;