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

转载:http://www.klstudio.com/post/182.html
[AS3]纯AS代码实现可预览本地图片的flash上传客户端
    需要Flash Player 10+版本的支持,原理就是主要利用fp10中的FileReference.load(),FileReference.data和 Loader.loadBytes()三个方法通过图片加载到内存中,来实现预览本地图片,但这个方式不太适用大图片预览,图片越大内存消耗就越大。

[注意]
1.我这边图片上传路径是无效的,所以图片上传失败是正常的,你们可以改一下上传路径即可;
2.需要Flash Player 10的支持;
3.这次主要研究是预览本地图片功能。

演示效果

实现代码

  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(2080180180);  
  49.             _state = STATE_CACHE;  
  50.               
  51.             //背景;  
  52.             this.graphics.beginFill(0x333333);  
  53.             this.graphics.drawRoundRect(00, BOX_WIDTH, BOX_HEIGHT, 1010);  
  54.             this.graphics.endFill();  
  55.             this.graphics.beginFill(0xEFEFEF);  
  56.             this.graphics.drawRoundRect(11, BOX_WIDTH – 2, BOX_HEIGHT – 21010);  
  57.             this.graphics.endFill();  
  58.             this.graphics.beginFill(0x666666);  
  59.             this.graphics.drawRoundRect(1030, BOX_WIDTH – 20, BOX_HEIGHT – 602020);             
  60.             this.graphics.endFill();  
  61.             this.graphics.beginFill(0xFEFEFE);  
  62.             this.graphics.drawRoundRect(1131, BOX_WIDTH – 22, BOX_HEIGHT – 622020);  
  63.             this.graphics.endFill();  
  64.               
  65.             this.graphics.beginFill(0xCCCCCC);  
  66.             this.graphics.drawRect(1170, BOX_WIDTH – 221);  
  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(0xFFFFFF14true));  
  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(0x33333312), falsefalse);                  
  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(0x33333312));  
  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(2040);  
  104.               
  105.             button = getButton("上传文件"80);           
  106.             button.move(10540);  
  107.             button.enabled = false;  
  108.               
  109.             //进度条;  
  110.             _progress = new ProgressBar();  
  111.             _progress.move(19040);  
  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(01);  
  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(01);  
  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.   
  270.             return new GlowFilter(color,  
  271.                                   alpha,  
  272.                                   blurX,  
  273.                                   blurY,  
  274.                                   strength,  
  275.                                   quality,  
  276.                                   inner,  
  277.                                   knockout);  
  278.         }  
  279.           
  280.         private function date2str(day:Date):String {  
  281.             var str:String = day.getFullYear() + "-";  
  282.             str += num2str(day.getMonth() + 1) + "-";  
  283.             str += num2str(day.getDate()) + " ";  
  284.             str += num2str(day.getHours()) + ":";  
  285.             str += num2str(day.getMinutes()) + ":";  
  286.             str += num2str(day.getSeconds());  
  287.             return str;  
  288.         }  
  289.           
  290.         private function num2str(val:Number):String {  
  291.             var str:String = "00" + val;  
  292.             return str.substr(str.length – 22);             
  293.         }  
  294.           
  295.         private function debug(message:String):void {  
  296.             _state_txt.text = message;  
  297.         }  
  298.           
  299.     }  
  300.       

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏