[AS3]纯AS代码实现可预览本地图片的flash上传客户端

发布:kinglong | 发布时间: 2008年12月11日

[AS3]纯AS代码实现可预览本地图片的flash上传客户端

需要Flash Player 10+版本的支持，原理就是主要利用fp10中的FileReference.load()，FileReference.data和Loader.loadBytes()三个方法通过图片加载到内存中，来实现预览本地图片，但这个方式不太适用大图片预览，图片越大内存消耗就越大。

[注意]

1.我这边图片上传路径是无效的，所以图片上传失败是正常的，你们可以改一下上传路径即可；

2.需要Flash Player 10的支持；

3.这次主要研究是预览本地图片功能。

演示效果

实现代码

package project.test { 	import flash.display.*; 	import flash.geom.Rectangle; 	import flash.net.*; 	import flash.text.*; 	import flash.filters.*; 	import flash.events.*; 	import flash.system.Security; 	 	import fl.controls.Button; 	import fl.controls.ProgressBar; 	import fl.controls.ProgressBarMode; 	 	/** 	 * @link kinglong@gmail.com 	 * @author Kinglong 	 * @playerversion fp10	 	 */ 	[SWF(width="500", height="300", frameRate="24", backgroundColor="#FFFFFF")] 	public class TestUpload extends Sprite { 		 		private const DEFAULT_UPLOAD_PAGE:String = "http://test.klstudio.com/upload.asp";		 		private const BOX_WIDTH:uint = 500; 		private const BOX_HEIGHT:uint = 300; 		 		private const STATE_CACHE:String = "cache"; 		private const STATE_UPLOAD:String = "upload"; 		 		private var _filters:Array; 		private var _file:FileReference; 		private var _loader:Loader; 		private var _progress:ProgressBar; 		private var _state:String; 		private var _buttons:Array; 		private var _labels:Array; 		private var _txts:Array; 		private var _rect:Rectangle; 		private var _state_txt:TextField; 		 		public function TestUpload() { 			Security.allowDomain("*"); 			 			_buttons = []; 			_txts = []; 			_labels = ["文件名称:","文件类型:","文件大小:","修改时间:"]; 			 			_rect = new Rectangle(20, 80, 180, 180); 			_state = STATE_CACHE; 			 			//背景; 			this.graphics.beginFill(0x333333); 			this.graphics.drawRoundRect(0, 0, BOX_WIDTH, BOX_HEIGHT, 10, 10); 			this.graphics.endFill(); 			this.graphics.beginFill(0xEFEFEF); 			this.graphics.drawRoundRect(1, 1, BOX_WIDTH - 2, BOX_HEIGHT - 2, 10, 10); 			this.graphics.endFill(); 			this.graphics.beginFill(0x666666); 			this.graphics.drawRoundRect(10, 30, BOX_WIDTH - 20, BOX_HEIGHT - 60, 20, 20);			 			this.graphics.endFill(); 			this.graphics.beginFill(0xFEFEFE); 			this.graphics.drawRoundRect(11, 31, BOX_WIDTH - 22, BOX_HEIGHT - 62, 20, 20); 			this.graphics.endFill(); 			 			this.graphics.beginFill(0xCCCCCC); 			this.graphics.drawRect(11, 70, BOX_WIDTH - 22, 1); 			this.graphics.endFill(); 			 			this.graphics.beginFill(0x000000); 			this.graphics.drawRect(_rect.x-1, _rect.y-1, _rect.width+2, _rect.height+2); 			this.graphics.endFill();			 			this.graphics.beginFill(0xEEEEEE); 			this.graphics.drawRect(_rect.x, _rect.y, _rect.width, _rect.height); 			this.graphics.endFill(); 			 			 			//标题; 			var label:TextField;			 			label = getLabel("图片上传（预览图片版） by Kinglong", getTextFormat(0xFFFFFF, 14, true)); 			label.x = 10; 			label.y = 5; 			label.filters = [getLabelFilter(0x000000)]; 			this.addChild(label); 			 			for (var i:uint = 0; i < _labels.length; i++ ) {			 				label = getLabel(_labels[i], getTextFormat(0x333333, 12), false, false);				 				label.x = _rect.right+5; 				label.y = _rect.y + 25 * i; 				label.width = 280; 				label.height = 20; 				_txts.push(label); 				this.addChild(label); 			}			 			 			_state_txt = getLabel("状态:", getTextFormat(0x333333, 12)); 			_state_txt.x = 10; 			_state_txt.y = BOX_HEIGHT - _state_txt.height - 5; 			this.addChild(_state_txt); 			 			//按钮; 			var button:Button; 			button = getButton("选择文件", 80);			 			button.move(20, 40); 			 			button = getButton("上传文件", 80);			 			button.move(105, 40); 			button.enabled = false; 			 			//进度条; 			_progress = new ProgressBar(); 			_progress.move(190, 40); 			_progress.setSize(290,22); 			_progress.mode = ProgressBarMode.MANUAL;						 			this.addChild(_progress); 			 			//文件类型; 			_filters = []; 			var filter:FileFilter;			 			filter = new FileFilter("所有支持图片文件(*.jpg,*.jpeg,*.gif,*.png)", "*.jpg;*.jpeg;*.gif;*.png"); 			_filters[_filters.length] = filter; 			filter = new FileFilter("JPEG files(*.jpg,*.jpeg)","*.jpg;*.jpeg"); 			_filters[_filters.length] = filter; 			filter = new FileFilter("GIF files (*.gif)","*.gif"); 			_filters[_filters.length] = filter; 			filter = new FileFilter("PNG files(*.png)","*.png"); 			_filters[_filters.length] = filter;	 			 			_file = new FileReference(); 			_file.addEventListener(Event.COMPLETE, fileHandler); 			_file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fileHandler); 			_file.addEventListener(Event.SELECT, fileHandler); 			_file.addEventListener(Event.OPEN, fileHandler);			 			_file.addEventListener(ProgressEvent.PROGRESS, fileHandler); 			_file.addEventListener(SecurityErrorEvent.SECURITY_ERROR, fileHandler); 			_file.addEventListener(IOErrorEvent.IO_ERROR, fileHandler); 			_file.addEventListener(HTTPStatusEvent.HTTP_STATUS, fileHandler); 			 			_loader = new Loader(); 			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadHandler); 			this.addChild(_loader); 		} 		 		public function get state():String { 			return _state; 		} 		 		private function clickHandler(event:MouseEvent):void { 			switch(event.target) { 				case _buttons[0]: 					_file.browse(_filters); 					break; 				case _buttons[1]: 					_file.upload(new URLRequest(DEFAULT_UPLOAD_PAGE)); 					_state = STATE_UPLOAD;					 					_buttons[0].enabled = false; 					_buttons[1].enabled = false; 					break; 			} 		} 		 		private function loadHandler(event:Event):void { 			_loader.scaleX = _loader.scaleY = 1; 			var w:uint = _loader.width; 			var h:uint = _loader.height; 			if (w > _rect.width || h > _rect.height) {				 				var ip:Number = w / h; 				var lp:Number = _rect.width / _rect.height;			 				_loader.width = (ip > lp)?_rect.width:_rect.height*ip; 				_loader.height = (ip > lp)?_rect.width / ip:_rect.height; 			} 			_loader.x = _rect.x + (_rect.width - _loader.width) / 2; 			_loader.y = _rect.y + (_rect.height - _loader.height) / 2;			 			_loader.visible = true; 		} 		 		private function fileHandler(event:Event):void { 			switch(event.type) { 				case Event.COMPLETE: 					if(state == STATE_CACHE){ 						_loader.loadBytes(_file.data); 					} 					break; 				case DataEvent.UPLOAD_COMPLETE_DATA: 					debug("图片上传完成!"); 					_buttons[0].enabled = true; 					_buttons[1].enabled = false; 					_progress.setProgress(0, 1); 					break; 				case Event.SELECT: 					_txts[0].text = _labels[0] + _file.name; 					_txts[1].text = _labels[1] + _file.type; 					_txts[2].text = _labels[2] + ((_file.size > 1024 * 1024)?Math.round(_file.size * 10 / (1024*1024))/10 + "MB":Math.round(_file.size * 10 / 1024)/10 + "KB");					 					_txts[3].text = _labels[3] + date2str(_file.modificationDate); 					_buttons[0].enabled = true; 					_buttons[1].enabled = true; 					_file.load(); 					_state = STATE_CACHE; 					_loader.visible = false; 					debug("图片已经准备!"); 					break; 				case Event.OPEN: 					if(state == STATE_UPLOAD){ 						debug("正在上传图片..."); 					} 					break; 				case ProgressEvent.PROGRESS: 					if (state == STATE_UPLOAD) { 						var pEvent:ProgressEvent = event as ProgressEvent; 						_progress.setProgress(pEvent.bytesLoaded, pEvent.bytesTotal); 					} 					break; 				case SecurityErrorEvent.SECURITY_ERROR: 				case IOErrorEvent.IO_ERROR: 				case HTTPStatusEvent.HTTP_STATUS:					 					if (state == STATE_UPLOAD) { 						debug("图片上传失败!"); 						_buttons[0].enabled = true; 						_buttons[1].enabled = true; 					}else { 						debug("图片缓冲失败!"); 					} 					_progress.setProgress(0, 1); 					break; 				 			} 		} 		 		private function getButton(lbl:String,width:uint=120):Button { 			var button:Button = new Button(); 			button.label = lbl; 			button.setSize(width, 22);	 			button.setStyle("textFormat", getTextFormat()); 			button.setStyle("disabledTextFormat", getTextFormat(0x999999)); 			button.setStyle("textPadding",4); 			button.addEventListener(MouseEvent.CLICK, clickHandler);			 			this.addChild(button); 			_buttons.push(button); 			return button; 		} 		 		private function getLabel(label:String, format:TextFormat, selectable:Boolean = false, autoSize:Boolean = true):TextField {			 			var lbl:TextField = new TextField(); 			lbl.selectable = selectable; 			lbl.defaultTextFormat = format; 			if(autoSize){ 				lbl.autoSize = TextFieldAutoSize.LEFT; 			} 			lbl.text = label; 			return lbl; 		} 		 		private function getTextFormat(color:uint=0x000000,size:uint = 12,bold:Boolean=false):TextFormat { 			var format:TextFormat = new TextFormat(); 			format.font = "宋体"; 			format.color = color; 			format.size = size; 			format.bold = bold; 			return format; 		} 		 		private function getLabelFilter(color:uint=0xFFFFFF):BitmapFilter { var alpha:Number = 0.8; var blurX:Number = 2; var blurY:Number = 2; var strength:Number = 3; var inner:Boolean = false; var knockout:Boolean = false; var quality:Number = BitmapFilterQuality.HIGH; return new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout); 		} 		 		private function date2str(day:Date):String { 			var str:String = day.getFullYear() + "-"; 			str += num2str(day.getMonth() + 1) + "-"; 			str += num2str(day.getDate()) + " "; 			str += num2str(day.getHours()) + ":"; 			str += num2str(day.getMinutes()) + ":"; 			str += num2str(day.getSeconds()); 			return str; 		} 		 		private function num2str(val:Number):String { 			var str:String = "00" + val; 			return str.substr(str.length - 2, 2);			 		} 		 		private function debug(message:String):void { 			_state_txt.text = message; 		} 		 	} 	 }

标签:

as3 预览图片 flash 上传

发布:kinglong | 分类:Flash技术 | 评论:28 | 引用:0 | 浏览: | TrackBack引用地址

相关文章:
从D2归来-有关Flash Player 10一些技术细节  (2008-12-1 9:17:3)
有关flash无法读取FireFox中Cookie的Bug解决方法  (2008-11-25 11:5:50)
[AS3]BaseSocket类-可以提升Socket数据传输效率  (2008-11-21 14:31:51)
[Socket+AMF3]Socket安全策略问题的解决  (2008-11-20 11:48:42)
[Socket+AMF3]给合Flash的Socket和AMF3来尝试开发web游戏引擎  (2008-11-19 10:57:52)
[Socket+AMF3]对Flash的Socket和AMF3的研究心得  (2008-11-18 15:22:25)
[AS3]Flash CS4的习作-3dbox  (2008-11-13 16:1:22)
flash player 10给我们带来了什么功能  (2008-11-10 15:29:47)
[转载]Flash Player 10 中的RTMFP(实现P2P)  (2008-11-10 13:57:57)
推荐SWFUpload上传工具  (2008-11-5 11:0:11)

1.honk
http://soido.org
Good！
2008-12-12 9:35:53 回复该留言

2.spe
在有些图片超过2000×2000就出问题了，还未超出2880.其实要是只为做预览其实意义不是太大，其实加上裁切会更好。
其实我喜欢本地保存的功能
2008-12-12 9:54:39 回复该留言

3.zhangfresh
编译的时候，不认_file.data和_file.load()，是不是flash cs3版本太低，要用cs4呢？
2008-12-12 14:53:55 回复该留言

4.kinglong
to spe:这个功能其实也是根据需求而定。
to zhangfresh:是的，是需要CS4编译的。
2008-12-15 15:03:26 回复该留言

5.近山
http://www.vsgame8.com
cool！
2008-12-16 20:04:03 回复该留言

6.3d
http://www.3dkj.net
完全看不明白
2008-12-20 11:36:34 回复该留言

7.dada
好是好用，就是代码长了点。看得眼花。
kinglong 于 2008-12-26 11:51:19 回复
这些又不是很多的，你只要去掉那些显示的东西，也没有多少内容！
2008-12-26 9:33:11 回复该留言

8.一溜烟
http://ezzz.5dblog.com
flash 9 可以做本地图片预览吗？
kinglong 于 2009-1-23 11:02:52 回复
这个需要flash player 10+才能可以
2009-1-22 23:50:39 回复该留言

9.Solo
请教一下kinglong，如何获取所选择的文件的路径。谢谢～
kinglong 于 2009-2-23 10:01:24 回复
Flash不提供文件的路径。
2009-2-23 2:11:49 回复该留言

10.水晶起源
http://www.shiroko.cn
太棒了，这正是我想要的，前辈的实力果然不俗
2009-3-18 11:44:12 回复该留言

11.yqd
cs4为啥也没有load和data哩
kinglong 于 2009-3-30 9:19:04 回复
CS4帮助文件应该有这部分内容的，所以编译时如果报不支持的话，那你看一下发布设置是不是Flash Player 10！
2009-3-27 16:50:00 回复该留言

12.ksd
请问如何测试上面的代码啊？
2009-4-3 16:39:51 回复该留言

13.xiaoxin100
楼主这篇贴子的内容很欢喜

但as代码直接复制调试有错误

找不出原因

可以发分 fla+as 源文件吗

感谢

邮箱 382222710@qq.com
2009-4-15 17:00:37 回复该留言

14.xiaoxin100
xiaoxin100 求助

楼主这篇贴子的内容很欢喜

as初学代码直接复制调试有错误

找不出原因

可以发分 fla+as 源文件吗

万分感谢

382222710@qq.com
kinglong 于 2009-9-27 10:14:39 回复
我提供的就是源码，你只要把这个类绑定到文档类上即可，然后把Button，ProgressBar组件放到库即可，如不能在编译，请检查flashIDE是否为Flash CS4环境。
2009-4-15 17:05:01 回复该留言

15.tiantian
楼主你这个做得很好。但是我有点看不懂，
能不能给个fla+as 源文件啊?十分感谢!
如果可以的话请发到我邮箱:935494559@qq.com
kinglong 于 2009-9-27 10:15:23 回复
我提供的就是源码，你只要把这个类绑定到文档类上即可，然后把Button，ProgressBar组件放到库即可，如不能在编译，请检查flashIDE是否为Flash CS4环境。
2009-5-12 18:44:47 回复该留言

16.vdvd1
能不能给个fla+as 源文件啊?十分感谢!
如果可以的话请发到我邮箱:vdvd1@126.com
再次感谢！！！
kinglong 于 2009-9-27 10:15:42 回复
我提供的就是源码，你只要把这个类绑定到文档类上即可，然后把Button，ProgressBar组件放到库即可，如不能在编译，请检查flashIDE是否为Flash CS4环境。
2009-7-18 18:59:38 回复该留言

17.Flash
为什么175行的：_loader.loadBytes(_file.data);
191行的：_file.load();
会报错？？
kinglong 于 2009-9-27 10:15:58 回复
请检查flashIDE是否为Flash CS4环境。
2009-7-23 17:05:40 回复该留言

18.admin
这个需要flash player 10的支持，另外需要在Flash CS4里面编译。。。
2009-7-24 12:24:10 回复该留言

19.19.admin
能发个fla+as 源文件给我吗？我的邮箱是chenguirong126@126.com,发了给我，在我淘宝店买东西9折优惠，http://shop57801737.taobao.com/
2009-8-6 16:37:01 回复该留言

20.ssxx
很好,很强大,不知道是否支持中文文件名?

另外,版主能否把你的 upload.asp　共享，我在网上下载的对中文的支持不友好，上传后文件名全是乱码，先谢谢你了．

sxl042_001＠163.com
kinglong 于 2009-9-27 10:11:17 回复
我代码里的上传地址是演示的，其实upload.asp是不存在的，但flash上传的后台和普通文件上传后基本是一致，没什么区别，所以只能你自己在网上找一下了.
2009-9-27 8:17:27 回复该留言

21.ssxx
首先非常感谢版主回复，还是上楼问题，我用 upload_5xSoft.INC 和upfile.asp 文件测试上传不成功，可能是upfile.asp中的问题，但一直未找到结果。能否请版主帮我修改下upfile.asp:

<% response.charset="utf_8" %>

<%
set upload=new upload_5xSoft
set file=upload.file("Filedata")
path="uploadfile/"
fname = file.FileName
if file.FileSize>0 then
file.SaveAs Server.mappath(path&fname)
end if
set file=nothing
set upload=nothing
%>
麻烦您了，非常感谢您的帮助。
2009-9-27 18:24:02 回复该留言

22.ssxx
版主您好，感谢您的回复，现在的问题是能上传成功，但对于中文名的图片会变成乱码的，这是怎么回事呢？
asp和inc都保存为utf_8格式了，flash里分别用System.useCodepage=true;（或false)测试过，中文都是乱码,这个问题困惑我好几天了
2009-9-27 21:09:43 回复该留言

23.chen3975
你好,在上传图片的前能在客户端对图片进行压缩后在上传么?例如用swfupload批量上传图片,在上传前在客户端对图片进行压缩后再上传到服务器中.
如何实现.
2009-11-2 11:52:41 回复该留言

24.kinglong
http://www.klsutdio.com
这个好像可以在这个基础上实现这个功能（把图片文件数据进行再zlib压缩），不过我觉得这个功能实用价值不大。
2009-11-11 14:34:42 回复该留言

25.sufeiyun
http://www.fjlf.net
可以发份 fla+as 源文件吗

感谢

邮箱 sufeiyun@126.com或sufeiyun@qq.com
2009-11-12 22:17:14 回复该留言

26.许勇
做的非常好，能否发一份 fla＋as，我万分感谢！！

email： 329681329@qq.com
2010-1-14 3:02:50 回复该留言

27.涛涛
麻烦发一份 fla+as 源文件

感谢

邮箱 239631951@qq.com
2010-2-1 12:13:55 回复该留言

28.sufeiyun
http://www.fjlf.net
最终搞定了，我在这贴上.NET(C#)的上传接收
using System.IO;//记得加入
public partial class i : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string uploadFolder = "/upfiles";

HttpFileCollection files = Request.Files;
if (files.Count == 0)
{
Response.Write("请勿直接访问本文件！");
Response.End();
}

string path = Server.MapPath(uploadFolder);

HttpPostedFile file = files[0];

FileInfo fi = new FileInfo(file.FileName);

if (file != null && file.ContentLength > 0)
{
string savePath = path + "/" + Path.GetFileName(fi.FullName);
file.SaveAs(savePath);
}
Response.Write("Success");//此步随便输出点什么，flash才有回应状态；
Response.End();
}
}
sufeiyun 于 2010-8-27 15:18:37 回复
当然，这只是示范，过滤程序请自行加入
sufeiyun 于 2010-8-27 15:20:47 回复
感谢 kinglong 超级帅哥的开源支持！
2010-8-27 15:17:07 回复该留言

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

Kinglong's Blog

关于本博客

[AS3]纯AS代码实现可预览本地图片的flash上传客户端

发表评论

搜索内容

最近发表

最新评论及回复

最近留言