`

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

阅读更多

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

 

分享到:
评论

相关推荐

    flash as3头像上传支持图片和拍照asp

    在本文中,我们将深入探讨如何使用Flash AS3实现头像上传功能,同时支持图片上传和拍照上传,并在后台使用ASP进行处理。AS3(ActionScript 3)是Adobe Flash平台的核心编程语言,常用于创建交互式内容,如网页游戏和...

    as3 摄像头拍照组件V2.0 客户端代码

    开发者需要在服务器端提供合适的跨域策略文件,以允许AS3代码访问摄像头。 8. **性能优化**: V2.0可能对性能进行了优化,例如减少不必要的计算,优化视频流的处理,或者使用异步方法来提高响应速度。 通过以上...

    PHP+Flash 仿微博头像上传开源代码

    【PHP+Flash 仿微博头像上传开源代码】是一个基于PHP和Flash技术实现的头像上传功能,它模仿了微博平台的头像更换流程,让用户能够方便地上传、预览并选择自己的个人头像。这一功能的核心在于结合了服务器端的PHP...

    As+lightbox+js实现实时加载图片进度.rar

    在IT行业中,实现图片预览和实时加载进度是常见的需求,尤其在网页设计和开发中。这个名为"As lightbox js实现实时加载图片进度.rar"的压缩包文件提供了一个解决方案,它结合了ActionScript(AS)、Lightbox效果以及...

    flash as3.0 留言板

    3. **图形渲染**:Flash AS3.0提供强大的绘图API,可以用来创建界面元素,如输入框、按钮和文本显示区域。界面清新简洁的留言板,其布局和样式都可通过这些API实现。 4. **数据存储**:留言板需要保存用户的留言,...

    PHP+Flash头像图片上传并裁切

    【PHP+Flash头像图片上传并裁切】技术是Web开发中常见的用户头像处理功能,结合了PHP服务器端语言和Flash客户端技术,为用户提供了一种便捷的方式上传和裁剪个人头像。这一过程通常包括以下几个关键步骤: 1. **...

    flash+php图片展示

    - "flash+php图片展示代码"可能是包含前端Flash源文件(.fla或.as)、PHP处理脚本(.php)、样式表(.css)和可能的数据库配置文件(如.config.php)的完整项目代码。解压后,开发者可以学习和修改这些文件以适应...

    flash批量上传图片

    在IT行业中,"Flash批量上传图片"是一种常见的功能,它主要应用于网站或应用程序,使得用户可以一次性上传多张图片,极大地提高了工作效率。Flash是Adobe公司开发的一种多媒体软件平台,广泛用于创建动态图形、交互...

    js+flash调用本地/usb摄像头拍照上传

    使用AS3(ActionScript 3)代码,你可以创建一个Camera对象来获取摄像头的视频流,然后使用Sprite或MovieClip来显示预览,最后通过FileReference对象实现文件上传。 以下是一个简单的Flash示例,展示如何调用摄像头...

    flash实现在线拍照

    标题“Flash实现在线拍照”指的是使用Adobe Flash技术来创建一个Web应用程序,允许用户通过他们的网络摄像头进行实时拍照。这一功能在过去的网页设计中非常常见,因为Flash提供了对多媒体内容的强大支持,包括视频流...

    基于mvc的多图片上传预览

    在.NET MVC框架中实现多图片上传预览是一项常见的需求,特别是在构建富交互式的Web应用时。这个项目的核心是利用ASP.NET MVC的控制器、视图和模型(MVC模式)来处理用户上传的多张图片,并在上传前进行预览。jQuery...

    asp.net 中使用flash实现在线拍照

    1. **创建Flash组件**:编写AS3(ActionScript 3)代码,利用Flash的Camera类获取用户电脑的摄像头,并使用Microphone类获取麦克风。通过这些接口,用户可以在网页上看到摄像头的实时预览,并可以点击按钮进行拍照。...

    ssh+extjs4+flash源代码 导入可运行

    6. **Flash组件**:可能包括AS3代码,处理文件上传、下载和播放功能。 学习这个项目,开发者可以深入理解SSH框架如何协同工作,以及如何将现代前端技术(如ExtJS4)与后端服务相结合,同时了解Flash在Web应用中的...

    asp+flash在线拍照

    在IT行业中,"asp+flash在线拍照"是一个古老但经典的Web应用程序示例,它结合了Active Server Pages(ASP)技术和Adobe Flash技术来实现用户在网页上进行实时拍照或上传图片的功能。这个应用在早期互联网时代非常...

    flash 相册管理系统

    2. **面向对象编程**:AS3.0支持类和接口,使得代码组织更加清晰,可维护性增强。在相册系统中,可以定义如`Photo`、`Album`和`User`等类,分别代表照片、相册和用户,通过继承和多态性来构建复杂的业务逻辑。 3. *...

    Asp.net使用flash记性网页在线拍照

    这个组件可能是第三方库,如Flex或Open Source的SWFObject,也可能是你自己编写的AS3代码。描述中提到的项目可能已经提供了一个这样的组件。 2. **API接口设计**:Flash与服务器端的通信通常通过ActionScript的...

    flash 批量上传 .net上传控件

    Flash批量上传.Net上传控件是一种技术解决方案,它利用Adobe Flash的技术特性来实现用户友好的、多文件同时上传的功能,并与.NET框架集成,提供服务器端的处理能力。 Flash在早期因其丰富的图形和多媒体支持而被...

    Flash+ASP.NET 2.0在线拍照源码

    3. **JS和AS简易通信**:JavaScript(JS)是一种在客户端运行的脚本语言,负责页面的交互逻辑。在本项目中,JS调用AS(ActionScript,Flash中的编程语言)来控制相机操作。例如,当用户点击拍照按钮时,JS会触发AS...

    PHP实例开发源码—使用Flash在线制作头像.zip

    例如,它可能包括处理用户上传的图片文件,将其保存到服务器的指定目录,并生成相应的缩略图或预览图。此外,PHP还可能负责与数据库交互,存储用户的头像信息,以便用户在未来能够访问和管理它们。 其次,Flash曾经...

    php+flash编辑头像AvatarEditor

    `editor_source.as`和`editor_source_binary_transfer.as`是ActionScript源代码文件,分别负责编辑功能和二进制数据传输。通过Flash,用户可以在浏览器上实时预览和编辑头像,提供了丰富的图形操作和自定义选项。 3...

Global site tag (gtag.js) - Google Analytics