每天学一点flash（67） 上传图片（3）

每天学一点flash（67） 上传图片（2）

http://blog.csdn.net/hero82748274/archive/2010/08/15/5814495.aspx

继续，一步步完善这个。今天Vincent  给我看了他的开发php+flash 上传图片客户端，功能很完善而且实用性很强。不过现在还要继续完善一下才能继续。

 一步步来完善这部分知识。今天采用绘图API进行进行描绘一个图片容器。

在这个对象里面，包含了两个图象，一个是容器底部，一个是右上角的按钮。

容器是显示本地浏览的图片，按钮是去除容器。

所采用的绘图APi 的是采用了圆角的方式绘制底部，圆的图案用于关闭的按钮。

pen.graphics.drawRoundRect(0,0,Width,Height,10,10);//绘制圆角

button.graphics.drawCircle(cx,cy,r);//绘制园

package { //用于显示上传的图片容器 import flash.display.Sprite; import flash.display.Shape; import flash.events.*; import flash.geom.*; import flash.filters.GlowFilter; import flash.display.DisplayObject; public class PhotoContain extends Sprite { private var Width:Number; private var Height:Number; private var pen:Sprite=new Sprite(); private var button:Sprite=new Sprite(); private var bmp:DisplayObject = null; public static const PHOTO_CLICK:String = "photoclick";//点击事件 public function PhotoContain(Width:Number,Height:Number) { this.Width = Width;//底部宽度 this.Height = Height;//底部高度 addChildAt(pen,0); addChild(button); pen.filters = [new GlowFilter(0x999999)]; button.filters = [new GlowFilter(0x999999)]; init(Width,Height); pen.buttonMode = true; button.buttonMode = true; } //初始化容器的底部和关闭按钮 private function init(Width:Number,Height:Number):void { pen.graphics.beginFill(0xffffff); pen.graphics.drawRoundRect(0,0,Width,Height,10,10); pen.graphics.endFill(); var cx:Number = Width - Width / 14; var cy:Number = Width / 14;//中心 var r:Number = Width / 14;//半径 button.graphics.beginFill(0xffffff); button.graphics.drawCircle(cx,cy,r); button.graphics.endFill(); button.graphics.lineStyle(1,0x999999); button.graphics.moveTo(cx,cy); button.graphics.lineTo(cx+r*Math.cos(45*Math.PI/180),cy+r*Math.sin(45*Math.PI/180)); button.graphics.moveTo(cx,cy); button.graphics.lineTo(cx+r*Math.cos(-45*Math.PI/180),cy+r*Math.sin(-45*Math.PI/180)); button.graphics.moveTo(cx,cy); button.graphics.lineTo(cx+r*Math.cos(135*Math.PI/180),cy+r*Math.sin(135*Math.PI/180)); button.graphics.moveTo(cx,cy); button.graphics.lineTo(cx+r*Math.cos(-135*Math.PI/180),cy+r*Math.sin(-135*Math.PI/180)); pen.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownHandler); pen.addEventListener(MouseEvent.ROLL_OVER,penRollOver); pen.addEventListener(MouseEvent.ROLL_OUT,penRollOut); button.addEventListener(MouseEvent.CLICK,clearContent); button.addEventListener(MouseEvent.ROLL_OVER,buttonRollOver); button.addEventListener(MouseEvent.ROLL_OUT,buttonRollOut); } private function buttonRollOver(event:MouseEvent):void { button.filters = [new GlowFilter(0x0099FF)]; } private function buttonRollOut(event:MouseEvent):void { button.filters = [new GlowFilter(0x999999)]; } private function penRollOver(event:MouseEvent):void { pen.filters = [new GlowFilter(0x0099FF)]; } private function penRollOut(event:MouseEvent):void { pen.filters = [new GlowFilter(0x999999)]; } //清除容器的底部 private function clearContent(event:MouseEvent):void { removePhoto(); } //添加位图 public function addPhoto(bmp:DisplayObject):void { removePhoto(); this.bmp = bmp; this.addChildAt(bmp,1); bmp.scaleX = bmp.scaleY = 1; var s:Number = sacle(this.Width,this.Height,bmp.width,bmp.height); bmp.scaleX = bmp.scaleY = s; bmp.x = uint(Width - bmp.width) / 2; bmp.y = uint(Height - bmp.height) / 2; } private function onMouseDownHandler(event:MouseEvent):void { //removePhoto(); this.dispatchEvent(new Event(PhotoContain.PHOTO_CLICK)); } //删除图片 private function removePhoto():void { if (bmp != null) { if (this.contains(bmp)) { removeChild(bmp); bmp = null; } } } //移动图片 public function move(x:Number,y:Number):void { this.x = x; this.y = y; } //投影缩放比例 private function sacle(contain_W:Number,contain_H:Number,bmpW:Number,bmpH:Number):Number { var bw:Number = contain_W / bmpW; var bh:Number = contain_H / bmpH; var scale:Number = Math.min(bw,bh); if (scale < 1) { return scale; } else { scale = 1; } return scale; } } }

上传的图片的，可以单选或者多选的方式，在这里个人只是选择了单选方式制作。这个类当中封装了两个功能，添加图片显示 和删除图片显示功能。

实现过程：首先是实例化六个PhotoCotain 对象容器。用于显示装载的图片。

在这里 修改之前一个方法：

//上传图片
  public function browseImage():void
  {
   file.browse([imagesFilter]);
  }

再增加一个方法，用于发送上传 图片到服务器当中！

  public function UploadImage(request:URLRequest, uploadDataFieldName:String = "Filedata", testUpload:Boolean = false):void
  {
   file.upload(request,uploadDataFieldName,testUpload);
  }

原先是这样

1.  //上传图片   
2.         public function upLoadImage():void  
3.         {   
4.             file.browse([imagesFilter]);   
5.         }   

测试代码：

import org.summerTree.net.ImageUpload; import flash.display.Bitmap; import flash.events.MouseEvent; var file:ImageUpload=new ImageUpload();//这里创建上传图像 var targetPhoto:PhotoContain; file.addEventListener(Event.INIT,oninit); //创建6个不同的对象 for (var i:int=0; i<6; i++) { var contain:PhotoContain = new PhotoContain(150,100); addChild(contain); contain.x=45+15*(i%3)+contain.width*(i%3); contain.y=80+15*(int(i/3))+contain.height*(int(i/3)); contain.addEventListener(PhotoContain.PHOTO_CLICK,uploadPhoto); } function uploadPhoto(event:Event):void { targetPhoto = event.currentTarget as PhotoContain ; file.browseImage();//浏览图片 } function oninit(event:Event):void { var bitmap:Bitmap = new Bitmap(file.bitmapData); targetPhoto.addPhoto(bitmap); }

初步完成了这个东西后，我们还要继续完善一下 和服务器进行交互的问题。

怎样实现上传图片到服务器？

怎样实现多张图片的本地上传？

怎样浏览多张图片？

怎样修改更加友善的界面上传？

怎样对上传图片进行修改描述和名称？

怎样对上传图片进行？