当前位置:主页 > 设计教程 > Flash > 正文

纯AS代码实现可预览本地图片的flash上传客户端(as3.0)

来源:|作者:|时间:2009-01-04|人气:|编辑:

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

[注意]:

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

2.需要Flash Player 10的支持;

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

演示效果:

/UploadTeach/200812/20081229131941575.swf

实现代码:

view plaincopy to clipboardPRint?
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;   
        }   
           
    }   
       
}
    最近更新
    简而精致的MILKO牛奶包装欣赏

    简而精致的MILKO牛奶包装欣赏

    分 类: 包装设计
    日 期: 2015-07-14
    人 气: 93

    Irina Vinnik精美的童话书籍设计欣赏

    Irina Vinnik精美的童话书籍设计欣赏

    分 类: 封面设计
    日 期: 2015-07-14
    人 气: 113

    LOnde戏剧艺术中心2015-2016宣传册设计

    L'Onde戏剧艺术中心2015-2016宣传册设计

    分 类: 画册设计
    日 期: 2015-07-14
    人 气: 94

    耐克篮球探索主题立体字设计

    耐克篮球探索主题立体字设计

    分 类: 字体设计
    日 期: 2015-07-14
    人 气: 97

    耐克Kobe release系列视觉设计

    耐克Kobe release系列视觉设计

    分 类: 平面设计作品
    日 期: 2015-07-13
    人 气: 266