纯AS代码实现可预览本地图片的flash上传客户端(as3.0)
需要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(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 193 + "MB":Math.round(_file.size * 10 / 1024)/10 + "KB"); 194 _txts[3].text = _labels[3] + date2str(_file.modificationDate); 195 _buttons[0].enabled = true; 196 _buttons[1].enabled = true; 197 _file.load(); 198 _state = STATE_CACHE; 199 _loader.visible = false; 200 debug("图片已经准备!"); 201 break; 202 case Event.OPEN: 203 if(state == STATE_UPLOAD){ 204 debug("正在上传图片..."); 205 } 206 break; 207 case ProgressEvent.PROGRESS: 208 if (state == STATE_UPLOAD) { 209 var pEvent:ProgressEvent = event as ProgressEvent; 210 _progress.setProgress(pEvent.bytesLoaded, pEvent.bytesTotal); 211 } 212 break; 213 case SecurityErrorEvent.SECURITY_ERROR: 214 case IOErrorEvent.IO_ERROR: 215 case HTTPStatusEvent.HTTP_STATUS: 216 if (state == STATE_UPLOAD) { 217 debug("图片上传失败!"); 218 _buttons[0].enabled = true; 219 _buttons[1].enabled = true; 220 }else { 221 debug("图片缓冲失败!"); 222 } 223 _progress.setProgress(0, 1); 224 break; 225 226 } 227 } 228 229 private function getButton(lbl:String,width:uint=120):Button { 230 var button:Button = new Button(); 231 button.label = lbl; 232 button.setSize(width, 22); 233 button.setStyle("textFormat", getTextFormat()); 234 button.setStyle("disabledTextFormat", getTextFormat(0x999999)); 235 button.setStyle("textPadding",4); 236 button.addEventListener(MouseEvent.CLICK, clickHandler); 237 this.addChild(button); 238 _buttons.push(button); 239 return button; 240 } 241 242 private function getLabel(label:String, format:TextFormat, selectable: 243 Boolean = false, autoSize:Boolean = true):TextField { 244 var lbl:TextField = new TextField(); 245 lbl.selectable = selectable; 246 lbl.defaultTextFormat = format; 247 if(autoSize){ 248 lbl.autoSize = TextFieldAutoSize.LEFT; 249 } 250 lbl.text = label; 251 return lbl; 252 } 253 254 private function getTextFormat(color:uint=0x000000,size:uint = 12,bold:Boolean=false): 255 TextFormat { 256 var format:TextFormat = new TextFormat(); 257 format.font = "宋体"; 258 format.color = color; 259 format.size = size; 260 format.bold = bold; 261 return format; 262 } 263 264 private function getLabelFilter(color:uint=0xFFFFFF):BitmapFilter { 265 var alpha:Number = 0.8; 266 var blurX:Number = 2; 267 var blurY:Number = 2; 268 var strength:Number = 3; 269 var inner:Boolean = false; 270 var knockout:Boolean = false; 271 var quality:Number = BitmapFilterQuality.HIGH; 272 273 return new GlowFilter(color, 274 alpha, 275 blurX, 276 blurY, 277 strength, 278 quality, 279 inner, 280 knockout); 281 } 282 283 private function date2str(day:Date):String { 284 var str:String = day.getFullYear() + "-"; 285 str += num2str(day.getMonth() + 1) + "-"; 286 str += num2str(day.getDate()) + " "; 287 str += num2str(day.getHours()) + ":"; 288 str += num2str(day.getMinutes()) + ":"; 289 str += num2str(day.getSeconds()); 290 return str; 291 } 292 293 private function num2str(val:Number):String { 294 var str:String = "00" + val; 295 return str.substr(str.length - 2, 2); 296 } 297 298 private function debug(message:String):void { 299 _state_txt.text = message; 300 } 301 302 } 303 304 }
