前段时间因为自己的项目需要上传照片并对照片进行简单的处理，所以使用FLEX制作了一个上传照片的小应用。

这个小应用的特点是FLEX上传图片之后，后台PHP对图片进行处理转换成一种图片格式，然后把图片路径返回给FLEX显示，FLEX显示之后会在请求后台PHP一次删除图片（其实这里做的复杂了一点，可以直接让PHP把图片转换成一种图片格式之后直接把图片数据返回给FLEX，然后删除图片文件的），在flex中对照片进行处理并截取指定图片数据，把图片数据传递给JS，JS在对图片数据进行处理，这样可以进行表单整体提交，来达到不上传对于的图片文件到服务器浪费服务器的空间。

DEMO：http://www.oursit.com/demo/updatepic_demo/

这里我们先来说下这个DEMO的用法，首先我们点击“浏览“，会弹出一个选择窗口，选择我们的图片并上传。这时候上传图片窗口会显示我们上传的图片（这里上传的图片文件就已经删除了），我们可以使用鼠标拖动图片位置和左下角的进度条可以调整图片大小。我们选择好图片在上传图片中显示的样子之后，只要双击上传图片窗口中的图片，就会把我们想要截取的图片显示在右边的保存图片窗口中，下面的文本框中会出现很多数据，其实这些数据就是保存图片窗口中图片的二进制数据。这样我们就可以提交表单来对图片数据进行处理了。

上面只是说明使用方法，可能大家都会觉得这两个窗口不美观而且太小了，因为我自己项目的局限性的问题请大家原谅:)(什么项目？保密)。

下面我就来介绍一下实现方法

如果要用FLEX制作一个我这样的上传照片应用需要使用到

PNGEncoder;URLUtil; PopUpManager;FileReference;BitmapData这几个类

首先我们介绍上传图片

我们点击浏览按钮的时候会调用下面函数

private function onBrowse():void
{
m_browse.addEventListener(Event.SELECT,onSelect); //选择好图片调用的事件
var m_filefilter:FileFilter = new FileFilter(”Images (*.jpg , *gif , *png)”, “*.jpg;*.gif;*.png”); //这里只支持jpg,gif,png图片
m_browse.browse([m_filefilter]);

}

选择好图片然后点击开发的时候会触发 m_browse的Event.SELECT事件,下面请看onSelect函数

private function onSelect(event:Event):void
{
m_browse.removeEventListener(Event.SELECT,onSelect);
m_browse.addEventListener(Event.OPEN,onOpenStart);
m_browse.addEventListener(IOErrorEvent.IO_ERROR,onIOError);
m_browse.addEventListener(ProgressEvent.PROGRESS,onProgress);
m_browse.addEventListener(Event.COMPLETE,onComplete);
m_browse.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onUploadCompleteData);
var urlrequest:URLRequest;
//Alert.show(URLUtil.getProtocol(Application.application.url));

//下面一块的作用是FLEX在IE和FF调用后台文件的路径不一样，所以这里必须要知道我们要调用的后台PHP文件在哪里，这里的PHP文件和上传图片的SWF文件放在同一目录
if(URLUtil.getProtocol(Application.application.url)==”file”)
{
urlrequest = new URLRequest(”index.php”);
}
else
{
var url:Array = Application.application.url.split(”/”);
url.pop();
//Alert.show(url.join(”/”)+”/index.php”);
urlrequest = new URLRequest(url.join(”/”)+”/index.php”);
}
var variables:URLVariables = new URLVariables();
variables.width = t_img_Picture.width;
variables.height = t_img_Picture.height;
urlrequest.method = URLRequestMethod.POST;
urlrequest.data = variables;
m_browse.upload(urlrequest,”Pic”);
}

这里上传图片完成之后会触发m_browse的DataEvent.UPLOAD_COMPLETE_DATA事件，我们在来看下onUploadCompleteData函数

private function onUploadCompleteData(event:DataEvent):void
{
t_img_Picture.addEventListener(Event.COMPLETE,onPicComplete); //上传图片窗口显示图片之后触发的事件

path = event.data;
t_img_Picture.source = event.data; //上传图片窗口中显示

}

上面函数表示后台PHP程序返回给我们一个刚才上传的图片路径，我们在上传图片窗口中显示，并触发t_img_Picture的Event.COMPLETE事件，我们在来看看onPicComplete函数

private function onPicComplete(event:Event):void
{
//Alert.show();
var m_urlrequest:URLRequest;

//Alert.show(URLUtil.getProtocol(Application.application.url));
if(URLUtil.getProtocol(Application.application.url)==”file”)
{
m_urlrequest = new URLRequest(”deletepic.php”);
}
else
{
var url:Array = Application.application.url.split(”/”);
url.pop();
//Alert.show(url.join(”/”)+”/index.php”);
m_urlrequest = new URLRequest(url.join(”/”)+”/deletepic.php”);
}
m_urlrequest.method = URLRequestMethod.POST;
var variables:URLVariables = new URLVariables();
variables.op = ‘delete’;
var pathtemp:Array = path.split(”/”);

variables.file = pathtemp[pathtemp.length-1];

m_urlrequest.data = variables;
var m_urlloader:URLLoader = new URLLoader(m_urlrequest);
m_urlloader.load(m_urlrequest);
t_img_Picture.removeEventListener(Event.COMPLETE,onPicComplete)
}

上面函数主要用来在图片加载到上传图片窗口中之后删除服务器中的图片文件（其实这里我们可以不必要这么麻烦，直接在上传的时候转换图片格式一致性之后获得图片数据并删除图片文件，然后只需要把图片数据返回给FLEX就可以了。大家可以试试）

现在刚才上传的图片就显示在上传图片窗口中了，下面在来介绍一下拖动图片和放大缩小图片。其实这两个操作都比较简单，看下面代码。这里我不做说明了，这些方法全部作为t_img_Picture的事件

private function onMouseDownImg():void //鼠标按下事件
{
imgisdrag = true;
t_img_Picture.startDrag();

}

private function onMouseUpImg():void //放开鼠标的事件
{

if(imgisdrag)
{
t_img_Picture.stopDrag();
onMouseMove()
imgisdrag = false;

}

}

private function onMouseOverImg():void //鼠标移进来的事件
{
t_img_Picture.mouseChildren = false;
t_img_Picture.buttonMode = true;
t_img_Picture.useHandCursor = true;
}

private function onMouseOutImg():void //鼠标移出去的事件
{
t_img_Picture.mouseChildren = true;
t_img_Picture.buttonMode = false;
t_img_Picture.useHandCursor = false;
}

private function OnDragChange():void //放大缩小的事件
{

if(direction > zoom.value)
{
t_img_Picture.height-=direction-zoom.value;
t_img_Picture.width-=direction-zoom.value;
}
else
{
t_img_Picture.height+=zoom.value-direction;
t_img_Picture.width+=zoom.value-direction;
}
direction = zoom.value;

}

private function onMouseMove():void //用于图片不能拖出窗口。显示图片拖动范围，这个可以用也可以不用
{
/*if(imgisdrag)
{
if(t_img_Picture.x>0)
{
t_img_Picture.x=0;
}
if(t_img_Picture.y>0)
{
t_img_Picture.y=0;
}
if((t_img_Picture.width+t_img_Picture.x)<my_canvas.width)
{
t_img_Picture.x = -(t_img_Picture.width-my_canvas.width);
}
if((t_img_Picture.height+t_img_Picture.y)<my_canvas.height)
{
t_img_Picture.y = -(t_img_Picture.height-my_canvas.height);
}
//Alert.show(t_img_Picture.x.toString());
}*/

}

下面就要来介绍把指定图片数据传递给JS，并把图片显示在右边保存图片窗口中

private function onDoubleClick():void //双击左边图片开始保存图片数据显示在右边窗口中，并传递二进制数据给JS
{
m_pictureBitmapData = new BitmapData(my_canvas.width,my_canvas.height);
m_pictureBitmapData.draw(my_canvas); //获得左边图片数据的BitmapData数据
//Alert.show(”aaaaaa”);
var m_pictureBitmap:Bitmap = new Bitmap(m_pictureBitmapData);
//save_Picture.addChild(m_pictureBitmap);
save_Picture.source = m_pictureBitmap; //显示在右边窗口中

var jpegEnc:JPEGEncoder = new JPEGEncoder(100);
var jpegData:ByteArray = jpegEnc.encode(m_pictureBitmapData); //把BitmapData数据转换成jpg图片二进制数据

//下面把二进制数据数组转换成字符串
var m_Data:String = ”;
for(var i:int=0;i<jpegData.length;i++)
{
if(m_Data.length > 0)
{
m_Data += “,” + jpegData[i].toString();
}
else
{
m_Data = jpegData[i].toString();
}
//Alert.show(”bbbbbbb”);
}

//调用JS函数setPic把二进制字串传递进去
ExternalInterface.call(”setPic”,save_Picture.width,save_Picture.height,m_Data);
}

现在FLEX的工作就完成了。下面讲下后台PHP代码，首先是上传图片

index.php //主要工作是把上传的图片统一成PNG格式的图片，并返回给FLEX图片路径

<?php

$path_parts = pathinfo($_FILES['Pic']['name']);

$fname = time().”_”.mt_rand(0,10000);

$filename = $fname.”.”.$path_parts['extension'];

if(move_uploaded_file($_FILES['Pic']['tmp_name'],”upload/”.$filename))
{
$size = getimagesize(”upload/”.$filename);
$newwidth = $size[0];
$newheight = $size[1];

$thumb = imagecreatetruecolor($newwidth, $newheight);
switch($size[2])
{
case 1: //GIF
$source = imagecreatefromgif(”upload/”.$filename);
break;
case 2: //JPG
$source = imagecreatefromjpeg(”upload/”.$filename);
break;
case 3: //PNG
$source = imagecreatefrompng(”upload/”.$filename);
break;
}
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $size[0], $size[1]);
unset($source);
unlink(”upload/”.$filename);
/*switch($size[2])
{
case 1: //GIF
imagegif($thumb,”upload/”.$filename);
break;
case 2: //JPG
imagejpeg($thumb,”upload/”.$filename);
break;
case 3: //PNG*/
imagepng($thumb,”upload/”.$fname.”.png”);
/*break;
}*/

die(”upload/”.$fname.”.png”);
}
?>

deletepic.php //在FLEX加载完上传图片之后，删除图片

<?php

if($_POST['op'] == ‘delete’)
{
$path_parts = pathinfo($_POST['file']);
if($path_parts['extension']==’png’)
{
@unlink(”upload/”.$_POST['file']);
}

die();
}

?>

下面就是JS函数了，比较简单

//获得图片数据
function setPic(width,height,data)
{

document.getElementById(”update_photo”).value = data;
}

下载DEMO：updatepic_demo.rar

下载代码：updatephoto.rar