纯AS代码flash实现预览上传本地图片功能

简介:

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

2.需要Flash Player 10的支持;

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

实现代码:

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;    
        }    
            
    }    
        

本文转自博客园知识天地的博客,原文链接:纯AS代码flash实现预览上传本地图片功能,如需转载请自行联系原博主。


相关文章
|
17天前
|
API
【sgUpload】自定义组件:自定义上传组件,支持上传文件夹及其子文件夹文件、批量上传,批量上传会有右下角上传托盘出现,支持本地上传图片转换为Base64image。
【sgUpload】自定义组件:自定义上传组件,支持上传文件夹及其子文件夹文件、批量上传,批量上传会有右下角上传托盘出现,支持本地上传图片转换为Base64image。
|
7月前
|
图形学
|
Web App开发 前端开发 Android开发
前端预览PDF文件(使用PDFJS)
我准备出一篇文章来介绍一下如何使用 PDFJS 。
1559 0
前端预览PDF文件(使用PDFJS)
uniapp上传预览大图-带删除按钮-摄像机-相册
uniapp上传预览大图-带删除按钮-摄像机-相册
|
9月前
|
小程序 API
小程序查看(预览)文件
小程序查看(预览)文件
376 0
|
JavaScript
原生 js 实现截图粘贴预览图片功能
原生 js 实现截图粘贴预览图片功能
122 0
原生 js 实现截图粘贴预览图片功能
|
移动开发 JSON 前端开发
前端H5选图预览到上传
在金融性质的App里,选择本地相册图片或者拍照,然后预览并且上传是一个典型的使用场景,比如常见的身份证信息上传。在最近接触的几家银行客户里,都反馈有类似的场景,并且在使用上都或多或少的遇到一些问题,最后找到我们,希望我们提供一些最佳实践。在这里分享下对应场景的一些优化解决方案。
324 0
前端H5选图预览到上传
|
存储 小程序 API
小程序实现图片上传,预览以及图片base64位处理
小程序实现图片上传,预览以及图片base64位处理
437 0
小程序实现图片上传,预览以及图片base64位处理
|
前端开发 JavaScript HTML5
使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。  在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。
1851 0
图片上传预览
     最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
788 0