前段时间因为自己的项目需要上传照片并对照片进行简单的处理，所以使用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; [...]

完全屏蔽FLEX右键菜单比当初想象的要难一些,因为大多数FLEX文档中仅仅介绍了如何隐藏一部分FLEX右键菜单,例如:
var contextMenu : ContextMenu = new ContextMenu();
contextMenu.hideBuiltInItems(); // 隐藏一些内建的鼠标右键菜单项
但 是这个功能不能隐藏”设置”和”关于”右键菜单,而在一些应用中,希望能够利用鼠标右键完成一些操作功能,例如绘图程序和游戏等,这时候右键菜单就是”欲 除之而后快”了.但在FLEX中监听mouseDown捕获不了右键事件,而在ContextMenu的Select事件也无法屏蔽.
在网上发现了一篇相关的BLOG,地址如下:
http://www.flex-flex.net/blog/article.asp?id=12
其基本思路为:
1,在FLEX中利用外部接口注册一个函数, 作为接收外部(HTML)右键事件的入口
2,在FLEX应用所在的HTML中拦截鼠标右键事件,调用FLEX外部函数,并取消事件的广播,以阻止事件到达FLEX应用.
3,在FLEX应用程序上监听mouseOver事件,并记录当前鼠标所在对象
4,当入口函数接收到HTML发送的右键事件后,模拟生成一个鼠标右键事件(buttonDown = false), 并发送到当前对象
5,在对象的mouseDown处理函数中,根据buttonDown的标志,分别处理鼠标左右键事件
这个思路比较清晰可行, 鼠标右键事件的流程为:
HTML鼠标右键事件—-FLEX外部函数—–模拟的鼠标右键事件——相应的处理函数
具体的实现为:
1, 在FLEX所在的HTML增加(注意根据自己的OBJECT ID更改”FlexTest”)
<script>
function onNsRightClick(e){
if(e.which == 3){
FlexTest.openRightClick();
e.stopPropagation();
}
return false;
}
function onIeRightClick(e){
if(event.button > 1){
FlexTest.openRightClick();
parent.frames.location.replace(’javascript: parent.falseframe’);
}
return false;
}
if(navigator.appName == “Netscape”){
document.captureEvents(Event.MOUSEDOWN);
document.addEventListener(”mousedown”, onNsRightClick, true);
}
else{
document.onmousedown=onIeRightClick;
}
</script>
2, 修改FLEX的MXML
增加初始化和MOUSEOVER事件处理函数
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”  initialize=”init()” mouseOver=”getMouseTarget(event)” >
增加MX SCRIPT
import mx.events.MenuEvent;
import mx.controls.Alert;
private var mouseTarget:DisplayObject;
function init()
{
ExternalInterface.addCallback(”openRightClick”, openRightClick);
}
function getMouseTarget(event:MouseEvent):void
{
mouseTarget = DisplayObject(event.target);
}
function openRightClick():void
{
var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_DOWN, true, false, mouseTarget.mouseX, [...]