收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2874|回复: 2

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

[复制链接]
发表于 2008-12-11 15:32:01 | 显示全部楼层 |阅读模式
[AS3]纯AS代码实现可预览本地图片的flash上传客户端
原文地址:http://www.klstudio.com/post/182.html
    需要Flash Player 10+版本的支持,原理就是主要利用fp10中的FileReference.load(),FileReference.data和Loader.loadBytes()三个方法通过图片加载到内存中,来实现预览本地图片,但这个方式不太适用大图片预览,图片越大内存消耗就越大。
演示效果
实现代码
  1. package project.test
  2. {
  3.         import flash.display.*;
  4.         import flash.geom.Rectangle;
  5.         import flash.net.*;
  6.         import flash.text.*;
  7.         import flash.filters.*;
  8.         import flash.events.*;
  9.         import flash.system.Security;
  10.        
  11.         import fl.controls.Button;
  12.         import fl.controls.ProgressBar;
  13.         import fl.controls.ProgressBarMode;
  14.        
  15.         /**
  16.          * @link kinglong@gmail.com
  17.          * @author Kinglong
  18.          * @playerversion fp10         
  19.          */
  20.         [SWF(width="500", height="300", frameRate="24", backgroundColor="#FFFFFF")]
  21.         public class TestUpload extends Sprite {
  22.                
  23.                 private const DEFAULT_UPLOAD_PAGE:String = "http://test.klstudio.com/upload.asp";               
  24.                 private const BOX_WIDTH:uint = 500;
  25.                 private const BOX_HEIGHT:uint = 300;
  26.                
  27.                 private const STATE_CACHE:String = "cache";
  28.                 private const STATE_UPLOAD:String = "upload";
  29.                
  30.                 private var _filters:Array;
  31.                 private var _file:FileReference;
  32.                 private var _loader:Loader;
  33.                 private var _progress:ProgressBar;
  34.                 private var _state:String;
  35.                 private var _buttons:Array;
  36.                 private var _labels:Array;
  37.                 private var _txts:Array;
  38.                 private var _rect:Rectangle;
  39.                 private var _state_txt:TextField;
  40.                
  41.                 public function TestUpload() {
  42.                         Security.allowDomain("*");
  43.                        
  44.                         _buttons = [];
  45.                         _txts = [];
  46.                         _labels = ["文件名称:","文件类型:","文件大小:","修改时间:"];
  47.                        
  48.                         _rect = new Rectangle(20, 80, 180, 180);
  49.                         _state = STATE_CACHE;
  50.                        
  51.                         //背景;
  52.                         this.graphics.beginFill(0x333333);
  53.                         this.graphics.drawRoundRect(0, 0, BOX_WIDTH, BOX_HEIGHT, 10, 10);
  54.                         this.graphics.endFill();
  55.                         this.graphics.beginFill(0xEFEFEF);
  56.                         this.graphics.drawRoundRect(1, 1, BOX_WIDTH - 2, BOX_HEIGHT - 2, 10, 10);
  57.                         this.graphics.endFill();
  58.                         this.graphics.beginFill(0x666666);
  59.                         this.graphics.drawRoundRect(10, 30, BOX_WIDTH - 20, BOX_HEIGHT - 60, 20, 20);                       
  60.                         this.graphics.endFill();
  61.                         this.graphics.beginFill(0xFEFEFE);
  62.                         this.graphics.drawRoundRect(11, 31, BOX_WIDTH - 22, BOX_HEIGHT - 62, 20, 20);
  63.                         this.graphics.endFill();
  64.                        
  65.                         this.graphics.beginFill(0xCCCCCC);
  66.                         this.graphics.drawRect(11, 70, BOX_WIDTH - 22, 1);
  67.                         this.graphics.endFill();
  68.                        
  69.                         this.graphics.beginFill(0x000000);
  70.                         this.graphics.drawRect(_rect.x-1, _rect.y-1, _rect.width+2, _rect.height+2);
  71.                         this.graphics.endFill();                       
  72.                         this.graphics.beginFill(0xEEEEEE);
  73.                         this.graphics.drawRect(_rect.x, _rect.y, _rect.width, _rect.height);
  74.                         this.graphics.endFill();
  75.                        
  76.                        
  77.                         //标题;
  78.                         var label:TextField;                       
  79.                         label = getLabel("图片上传(预览图片版) by Kinglong", getTextFormat(0xFFFFFF, 14, true));
  80.                         label.x = 10;
  81.                         label.y = 5;
  82.                         label.filters = [getLabelFilter(0x000000)];
  83.                         this.addChild(label);
  84.                        
  85.                         for (var i:uint = 0; i < _labels.length; i++ ) {                       
  86.                                 label = getLabel(_labels[i], getTextFormat(0x333333, 12), false, false);                               
  87.                                 label.x = _rect.right+5;
  88.                                 label.y = _rect.y + 25 * i;
  89.                                 label.width = 280;
  90.                                 label.height = 20;
  91.                                 _txts.push(label);
  92.                                 this.addChild(label);
  93.                         }                       
  94.                        
  95.                         _state_txt = getLabel("状态:", getTextFormat(0x333333, 12));
  96.                         _state_txt.x = 10;
  97.                         _state_txt.y = BOX_HEIGHT - _state_txt.height - 5;
  98.                         this.addChild(_state_txt);
  99.                        
  100.                         //按钮;
  101.                         var button:Button;
  102.                         button = getButton("选择文件", 80);                       
  103.                         button.move(20, 40);
  104.                        
  105.                         button = getButton("上传文件", 80);                       
  106.                         button.move(105, 40);
  107.                         button.enabled = false;
  108.                        
  109.                         //进度条;
  110.                         _progress = new ProgressBar();
  111.                         _progress.move(190, 40);
  112.                         _progress.setSize(290,22);
  113.                         _progress.mode = ProgressBarMode.MANUAL;                                               
  114.                         this.addChild(_progress);
  115.                        
  116.                         //文件类型;
  117.                         _filters = [];
  118.                         var filter:FileFilter;                       
  119.                         filter = new FileFilter("所有支持图片文件(*.jpg,*.jpeg,*.gif,*.png)", "*.jpg;*.jpeg;*.gif;*.png");
  120.                         _filters[_filters.length] = filter;
  121.                         filter = new FileFilter("JPEG files(*.jpg,*.jpeg)","*.jpg;*.jpeg");
  122.                         _filters[_filters.length] = filter;
  123.                         filter = new FileFilter("GIF files (*.gif)","*.gif");
  124.                         _filters[_filters.length] = filter;
  125.                         filter = new FileFilter("PNG files(*.png)","*.png");
  126.                         _filters[_filters.length] = filter;       
  127.                        
  128.                         _file = new FileReference();
  129.                         _file.addEventListener(Event.COMPLETE, fileHandler);
  130.                         _file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fileHandler);
  131.                         _file.addEventListener(Event.SELECT, fileHandler);
  132.                         _file.addEventListener(Event.OPEN, fileHandler);                       
  133.                         _file.addEventListener(ProgressEvent.PROGRESS, fileHandler);
  134.                         _file.addEventListener(SecurityErrorEvent.SECURITY_ERROR, fileHandler);
  135.                         _file.addEventListener(IOErrorEvent.IO_ERROR, fileHandler);
  136.                         _file.addEventListener(HTTPStatusEvent.HTTP_STATUS, fileHandler);
  137.                        
  138.                         _loader = new Loader();
  139.                         _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadHandler);
  140.                         this.addChild(_loader);
  141.                 }
  142.                
  143.                 public function get state():String {
  144.                         return _state;
  145.                 }
  146.                
  147.                 private function clickHandler(event:MouseEvent):void {
  148.                         switch(event.target) {
  149.                                 case _buttons[0]:
  150.                                         _file.browse(_filters);
  151.                                         break;
  152.                                 case _buttons[1]:
  153.                                         _file.upload(new URLRequest(DEFAULT_UPLOAD_PAGE));
  154.                                         _state = STATE_UPLOAD;                                       
  155.                                         _buttons[0].enabled = false;
  156.                                         _buttons[1].enabled = false;
  157.                                         break;
  158.                         }
  159.                 }
  160.                
  161.                 private function loadHandler(event:Event):void {
  162.                         _loader.scaleX = _loader.scaleY = 1;
  163.                         var w:uint = _loader.width;
  164.                         var h:uint = _loader.height;
  165.                         if (w > _rect.width || h > _rect.height) {                               
  166.                                 var ip:Number = w / h;
  167.                                 var lp:Number = _rect.width / _rect.height;                       
  168.                                 _loader.width = (ip > lp)?_rect.width:_rect.height*ip;
  169.                                 _loader.height = (ip > lp)?_rect.width / ip:_rect.height;
  170.                         }
  171.                         _loader.x = _rect.x + (_rect.width - _loader.width) / 2;
  172.                         _loader.y = _rect.y + (_rect.height - _loader.height) / 2;                       
  173.                         _loader.visible = true;
  174.                 }
  175.                
  176.                 private function fileHandler(event:Event):void {
  177.                         switch(event.type) {
  178.                                 case Event.COMPLETE:
  179.                                         if(state == STATE_CACHE){
  180.                                                 _loader.loadBytes(_file.data);
  181.                                         }
  182.                                         break;
  183.                                 case DataEvent.UPLOAD_COMPLETE_DATA:
  184.                                         debug("图片上传完成!");
  185.                                         _buttons[0].enabled = true;
  186.                                         _buttons[1].enabled = false;
  187.                                         _progress.setProgress(0, 1);
  188.                                         break;
  189.                                 case Event.SELECT:
  190.                                         _txts[0].text = _labels[0] + _file.name;
  191.                                         _txts[1].text = _labels[1] + _file.type;
  192.                                         _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");                                       
  193.                                         _txts[3].text = _labels[3] + date2str(_file.modificationDate);
  194.                                         _buttons[0].enabled = true;
  195.                                         _buttons[1].enabled = true;
  196.                                         _file.load();
  197.                                         _state = STATE_CACHE;
  198.                                         _loader.visible = false;
  199.                                         debug("图片已经准备!");
  200.                                         break;
  201.                                 case Event.OPEN:
  202.                                         if(state == STATE_UPLOAD){
  203.                                                 debug("正在上传图片...");
  204.                                         }
  205.                                         break;
  206.                                 case ProgressEvent.PROGRESS:
  207.                                         if (state == STATE_UPLOAD) {
  208.                                                 var pEvent:ProgressEvent = event as ProgressEvent;
  209.                                                 _progress.setProgress(pEvent.bytesLoaded, pEvent.bytesTotal);
  210.                                         }
  211.                                         break;
  212.                                 case SecurityErrorEvent.SECURITY_ERROR:
  213.                                 case IOErrorEvent.IO_ERROR:
  214.                                 case HTTPStatusEvent.HTTP_STATUS:                                       
  215.                                         if (state == STATE_UPLOAD) {
  216.                                                 debug("图片上传失败!");
  217.                                                 _buttons[0].enabled = true;
  218.                                                 _buttons[1].enabled = true;
  219.                                         }else {
  220.                                                 debug("图片缓冲失败!");
  221.                                         }
  222.                                         _progress.setProgress(0, 1);
  223.                                         break;
  224.                                
  225.                         }
  226.                 }
  227.                
  228.                 private function getButton(lbl:String,width:uint=120):Button {
  229.                         var button:Button = new Button();
  230.                         button.label = lbl;
  231.                         button.setSize(width, 22);       
  232.                         button.setStyle("textFormat", getTextFormat());
  233.                         button.setStyle("disabledTextFormat", getTextFormat(0x999999));
  234.                         button.setStyle("textPadding",4);
  235.                         button.addEventListener(MouseEvent.CLICK, clickHandler);                       
  236.                         this.addChild(button);
  237.                         _buttons.push(button);
  238.                         return button;
  239.                 }
  240.                
  241.                 private function getLabel(label:String, format:TextFormat, selectable:Boolean = false, autoSize:Boolean = true):TextField {                       
  242.                         var lbl:TextField = new TextField();
  243.                         lbl.selectable = selectable;
  244.                         lbl.defaultTextFormat = format;
  245.                         if(autoSize){
  246.                                 lbl.autoSize = TextFieldAutoSize.LEFT;
  247.                         }
  248.                         lbl.text = label;
  249.                         return lbl;
  250.                 }
  251.                
  252.                 private function getTextFormat(color:uint=0x000000,size:uint = 12,bold:Boolean=false):TextFormat {
  253.                         var format:TextFormat = new TextFormat();
  254.                         format.font = "宋体";
  255.                         format.color = color;
  256.                         format.size = size;
  257.                         format.bold = bold;
  258.                         return format;
  259.                 }
  260.                
  261.                 private function getLabelFilter(color:uint=0xFFFFFF):BitmapFilter {
  262.             var alpha:Number = 0.8;
  263.             var blurX:Number = 2;
  264.             var blurY:Number = 2;
  265.             var strength:Number = 3;
  266.             var inner:Boolean = false;
  267.             var knockout:Boolean = false;
  268.             var quality:Number = BitmapFilterQuality.HIGH;

  269.             return new GlowFilter(color,
  270.                                   alpha,
  271.                                   blurX,
  272.                                   blurY,
  273.                                   strength,
  274.                                   quality,
  275.                                   inner,
  276.                                   knockout);
  277.                 }
  278.                
  279.                 private function date2str(day:Date):String {
  280.                         var str:String = day.getFullYear() + "-";
  281.                         str += num2str(day.getMonth() + 1) + "-";
  282.                         str += num2str(day.getDate()) + " ";
  283.                         str += num2str(day.getHours()) + ":";
  284.                         str += num2str(day.getMinutes()) + ":";
  285.                         str += num2str(day.getSeconds());
  286.                         return str;
  287.                 }
  288.                
  289.                 private function num2str(val:Number):String {
  290.                         var str:String = "00" + val;
  291.                         return str.substr(str.length - 2, 2);                       
  292.                 }
  293.                
  294.                 private function debug(message:String):void {
  295.                         _state_txt.text = message;
  296.                 }
  297.                
  298.         }
  299.        
  300. }
复制代码
发表于 2008-12-11 15:37:53 | 显示全部楼层
强!
回复 支持 反对

使用道具 举报

发表于 2008-12-11 16:40:49 | 显示全部楼层
真的可以预览本地图片吗?瞧瞧~~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-7-24 12:41 , Processed in 0.093514 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表