[原创 flex] flex制作的多文件上传组件
效果演示地址：http://www.adanghome.com/upload/
源文件下载地址：http://www.adanghome.com/flash_upload.rar
下载后导入flexbuilder，即可按需修改。
最近在研究flex,这方面资料很少。从《程序员》杂志上看到《flex第一步》出版的时候，超高兴，周末就跑去买了。只是因为工作太忙，一直没机会学。现在项目已经基本完成了，我总算有时间来研究它了。
项目中需要增加一个flash上传的组件，实现多文件上传，同时显示上传进度。样式要像flickr或者海内一样。首先，我想到了去网上down一个。结果找来找去也没找到好用的，而且就算找到了，改变样式等等又会是麻烦的事情。算了，还是自己做一个吧。因为是第一次使用flex，也是第一次使用as3，所以这个组件用了一周的时间才完成。
先放上代码吧。
这是主mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="495" height="380" fontSize="12" backgroundAlpha="0" applicationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
import mx.events.CloseEvent;
import flash.net.FileReference;
import flash.net.FileReferenceList;
import flash.net.FileFilter;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import mx.controls.Alert;
import mx.events.CloseEvent;
import flash.external.ExternalInterface;
public var fileRef:FileReferenceList = new FileReferenceList();
public var uploadImg_num:int = 0;
public var upload_size:Number = 0;
public var upload_size_total:Number = 0;
private var info:Array = new Array();
//===================
// 功能设置
//===================
/* 允许一次性上传的最大图片数 ********************/
private var upload_maxCount:int = 50;
/* 上传提交的服务器端文件路径 ********************/
private var severURL:String = "photos.php?op=add_photo&tag=abc&album=0&gid=0&party_id=0&attr=0";
/* 服务器端接收用的名称 ********************/
private var fileName:String = "file1";
public var urlRequest:URLRequest = new URLRequest(severURL);
//===================
// 浏览本地文件
//===================
internal function browseHandler(e:Event):void{
var imageTypes:FileFilter = new FileFilter("Images(*.jpg,*.jpeg,*.gif,*.png)","*.jpg;*.jpeg;*.gif;*.png");
var allTypes:Array = new Array(imageTypes);
fileRef.browse(allTypes);
}
//===================
// 选中文件,关闭对话框
//===================
internal function selectHandler(e:Event):void{
var imageNum:int = fileRef.fileList.length;
if(imageNum>upload_maxCount){
Alert.show("一次最多只能上传"+upload_maxCount+"张图片","提示信息");
return;
}
info = new Array();
var sizeMum:Number = 0;
delete_btn.enabled = true;
add_btn.enabled = true;
for(var i:Number=0;i<imageNum;i++){
info.push({label:fileRef.fileList[i].name,data:fileRef.fileList[i].size/1000+"KB",width:0});
sizeMum+=fileRef.fileList[i].size;
}
process_list.dataProvider = info;
tip_txt.text="共"+imageNum+"张图片，"+(sizeMum/(1000*1000)).toString().slice(0,-4)+"MB";
}
//===================
// 单个文件上传结束
//===================
internal function completeHandler():void{
fileRef.fileList[uploadImg_num].removeEventListener(ProgressEvent.PROGRESS,onProcessHandler);
fileRef.fileList[uploadImg_num].removeEventListener(Event.COMPLETE,onComplete);
upload_size+=fileRef.fileList[uploadImg_num].size;
processBar_Total.width=(upload_size/upload_size_total)*488;
tip_txt.text="已上传" + int(upload_size*100/upload_size_total) + "% (" + (uploadImg_num+1) +"/" + fileRef.fileList.length + ")";
uploadImg_num++;
process_list.scrollToIndex(uploadImg_num);
if(uploadImg_num>=fileRef.fileList.length){
// ExternalInterface.call("uploadCompelete");
return;
}
upLoadImg(uploadImg_num);
}
internal function onComplete(e:Event):void{
completeHandler();
// Alert.show(e.toString());
}
//===================
// 监听上传进度
//===================
internal function onProcessHandler(e:ProgressEvent):void{
var proc:uint = e.bytesLoaded/e.bytesTotal*100;
var num:Number = uploadImg_num;
if(process_list.indexToItemRenderer(num)!=null)
{
process_list.indexToItemRenderer(num).document.processBar.width = proc*0.01*245;
info[num].width = proc*0.01*245;
}
}
//===================
// 执行上传操作
//===================
internal function upLoadImg(oNum:int):void{
try
{
fileRef.fileList[oNum].upload(urlRequest,fileName);
fileRef.fileList[oNum].addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onComplete);
fileRef.fileList[oNum].addEventListener(ProgressEvent.PROGRESS,onProcessHandler);
}
catch(e:Event){
Alert.show("上传出错","提示信息");
completeHandler();
}
}
//===================
// 点击上传按钮
//===================
internal function uploadHandler():void{
if(uploadImg_num!=0) return;
if(process_list.dataProvider==null || info.length<=0){
Alert.show("您还未选择图片!","提示信息");
return;
}
for(var i:Number=0;i<fileRef.fileList.length;i++){
upload_size_total+=fileRef.fileList[i].size;
}
upLoadImg(uploadImg_num);
delete_btn.enabled = false;
add_btn.enabled = false;
browse_btn.enabled = false;
}
//===================
// 执行删除操作
//===================
internal function deleteHandler(e:Event):void{
if(process_list.selectedIndices.length<=0){
Alert.show("您还没有选择图片","提示信息");
return;
}
Alert.show("您确定要删除选定图片？","提示信息",Alert.YES|Alert.NO,process_list,alertHandler,null,Alert.NO);
function alertHandler(evt:CloseEvent):void{
if(evt.detail==Alert.YES){
deleteItem();
} else {
}
}
function deleteItem():void{
var selectItems:Array = process_list.selectedItems;
var selectIndex:Array = process_list.selectedIndices;
var iCount:int = selectItems.length;
var sizeMum:Number = 0;
for(var i:int=0;i<iCount;i++){
info.splice(selectIndex[i],1);
fileRef.fileList.splice(selectIndex[i],1);
}
for(var j:Number=0;j<fileRef.fileList.length;j++){
sizeMum+=fileRef.fileList[j].size;
}
process_list.dataProvider = info;
tip_txt.text="共"+fileRef.fileList.length+"张图片，"+(sizeMum/(1000*1000)).toString().slice(0,-4)+"MB";
if(info.length<=0){
delete_btn.enabled = false;
}
}
}
//===================
// 执行添加操作
//===================
internal function addHandler(e:Event):void{
var imageTypes:FileFilter = new FileFilter("Images(*.jpg,*.jpeg,*.gif,*.png)","*.jpg;*.jpeg;*.gif;*.png");
var allTypes:Array = new Array(imageTypes);
var addFileRef:FileReferenceList = new FileReferenceList();
var sameImgIndex:Array = new Array();
var beforeAddLength:Number = fileRef.fileList.length;
addFileRef.browse(allTypes);
addFileRef.addEventListener(Event.SELECT,addSelectHandler);
function addSelectHandler():void{
if(addFileRef.fileList.length+fileRef.fileList.length>upload_maxCount){
Alert.show("一次最多只能上传"+upload_maxCount+"张图片","提示信息");
return;
}
for(var i:int=0;i<addFileRef.fileList.length;i++){
for(var j:int=0;j<fileRef.fileList.length;j++){
if(fileRef.fileList[j].name==addFileRef.fileList[i].name){
sameImgIndex.push(i);
}
}
}
for(var k:Number=0;k<addFileRef.fileList.length;k++){
fileRef.fileList.push(addFileRef.fileList[k]);
info.push({label:addFileRef.fileList[k].name,data:addFileRef.fileList[k].size/1000+"KB",width:0});
}
for(var m:Number=0;m<sameImgIndex.length;m++){
fileRef.fileList.splice(beforeAddLength+sameImgIndex[m]-m,1);
info.splice(beforeAddLength+sameImgIndex[m]-m,1);
}
var imageNum:int = fileRef.fileList.length;
var sizeMum:Number = 0;
for(var l:Number=0;l<imageNum;l++){
sizeMum+=fileRef.fileList[l].size;
}
process_list.dataProvider = info;
tip_txt.text="共"+imageNum+"张图片，"+(sizeMum/(1000*1000)).toString().slice(0,-4)+"MB";
delete_btn.enabled = true;
}
}
//===================
// 初始化函数
//===================
internal function initApp():void{
browse_btn.addEventListener(MouseEvent.CLICK,browseHandler);
fileRef.addEventListener(Event.SELECT,selectHandler);
delete_btn.addEventListener(MouseEvent.CLICK,deleteHandler);
add_btn.addEventListener(MouseEvent.CLICK,addHandler);
/* 注册供js调用的函数 ********************/
ExternalInterface.addCallback("uploadImg",uploadHandler);
}
]]>
</mx:Script>
<mx:Canvas>
<mx:Button label="浏览文件" id="browse_btn"/>
<mx:Label text="按住 Ctrl 或 Shift 键可以多选" x="85" y="3"/>
<mx:Button label="添加文件" x="330" id="add_btn" enabled="false"/>
<mx:Button label="删除文件" x="410" id="delete_btn" enabled="false"/>
<mx:Canvas width="490" height="25" backgroundColor="0Xf1f1f1" x="0" y="43" borderStyle="solid" borderColor="0Xbbbbbb">
<mx:Label text="文件名" x="5" y="3"/>
<mx:Label text="文件大小" x="215" y="3"/>
<mx:Label text="上传进度" x="320" y="3"/>
</mx:Canvas>
<mx:List x="0" y="67" width="490" rowCount="10" allowMultipleSelection="true" borderStyle="solid" borderColor="0Xbbbbbb" rowHeight="25" itemRenderer="ImageItem" id="process_list"/>
<mx:Canvas width="490" height="25" backgroundColor="0Xf1f1f1" x="0" y="318" borderStyle="solid" borderColor="0Xbbbbbb">
<mx:Label text="" fontWeight="bold" id="tip_txt" x="5" y="3"/>
</mx:Canvas>
<mx:Canvas borderStyle="solid" x="0" width="490" y="350" height="25" borderColor="0X124fc0" backgroundColor="0xffffff">
<mx:Canvas backgroundColor="0X124fc0" backgroundAlpha="0.5" id="processBar_Total" width="0" height="23"/>
</mx:Canvas>
</mx:Canvas>
</mx:Application>
这个是ImageItem.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="25" borderSides="bottom" borderStyle="solid">
<mx:Label width="195" text="{data.label}" x="5"/>
<mx:Label width="100" text="{data.data}" x="210"/>
<mx:Canvas width="145" borderStyle="solid" borderColor="0X124fc0" height="7" x="320" y="5">
<mx:Canvas width="{data.width}" id="processBar" height="7" backgroundColor="0X124fc0" backgroundAlpha="0.5"/>
</mx:Canvas>
</mx:Canvas>
然后是html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#upload_flash{width:495px;height:380px;}
</style>
<script type="text/javascript">
//上传完成后的回调函数
function uploadCompelete(){
/location.href=http://www.baidu.com;
}
function submitForm(){
thisMovie("upload").uploadImg();
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
</script>
</head>
<body>
<div id="upload_flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="upload" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="wmode" value="transparent">
<param name="movie" value="upload.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="upload.swf" quality="high" bgcolor="#869ca7" wmode="transparent"
width="100%" height="100%" name="upload" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</div>
<p><input type="button" value="提交" onclick="submitForm()" /></p>
</body>
</html>
最后是服务器端，服务器端很简单拉。我就放个php的吧：
<?php
//create the directory if doesn't exists (should have write permissons)
if(!is_dir("./files")) mkdir("./files", 0755);
//move the uploaded file
move_uploaded_file($_FILES['Filedata']['tmp_name'], "./files/".$_FILES['Filedata']['name']);
echo "aaa";
?>
===========================================================================
哈哈，效果还是蛮不错的。这里要说几个细节问题。很重要的心得：
1) as3的传值问题。 as3对事件监听只能使用函数名，不能传值，这是个很郁闷的地方。在网上搜过解决方案。大概有两种思路。一种是自定义一个类，扩展event，然后使用自己定义的类来监听事件。这个方法呢，我找了半天也没找到个具体的代码，很不好用，烦。另一种呢，是对触发事件的对象添加一个自己定义的属性，捆在对象上。然后呢，event.target来取得这个对象，再访问这个对象的这个属性。这种方法在写js的时候，我经常用，是很好用的方法。对象就当做是个容器，容器绑定我需要的变量，哈哈，超好用。只是，as3好像对对象扩展属性有限制，不能像js那样随心所欲地添加，需要先扩展一下类，然后才能对相应的对象添加属性。可是，超超超奇怪的是，这样一来，所有对象的这个属性居然指向同一地址！！！天哪，难道实例化对象之后，不是每个对象的属性都应该分配一个单纯的地址吗？？太匪夷所思了。最后，这种方法也没给我帮上忙。只能利用全局的变量来实现参数传递了。可是，这哪里算传参呢？好在我这个功能不算复杂，如果复杂一点的功能，恐怕就惨了。
2)list组件的itemRenderer的访问。 在flash里，我们如果要访问父级元素的子级元素很简单，只需要parent_mc.child_mc.child_mc就可以访问到任意层级的子元素。可是flex里的机制不一样。比如说这个itemRenderer应该如何访问。我首先想到,list组件会不会用一个item数组来表示它里面的元素呢？比如，如果访问第2个元素里的adang_mc，我就用list.item[1].adang_mc来访问它。结果flexbuilder里压根就没有相应的属性提示。后来在一英文网站看到有人提了相同的问题，才知道原来是利用.indexToItemRenderer(num).document来访问子元素的。
3）list组件itemRenderer的渲染问题。 本以为只要用循环去一个一个访问就可以访问到所有itemRenderer里面的元素了。结果发现根本不是这么回事，只有可视范围内的itemRenderer才会被渲染，不对，更确切地说，只有可视范围内的itemRenderer才能被访问！！！ 也就是说，如果你的list有二十个元素，而可视范围只有十个，当你访问第十一个的时候，它返回值为空！当前把滚动条拉下来时，那些本不可见的元素在可见范围的话，就可以访问了，而且本可见，现在被滚进去的元素现在又不能访问了。my god!!!这样编程多麻烦啊！我猜可能当初flex在设计list组件的时候，想尽量减少内存的开销吧，可是，这也太麻烦了吧？？有没有解决办法呢？有。我想到的是，自动进行滚动，在flex中有相应的代码,那就是.scrollToIndex(index)。只是这个方法并会在index出现在可视范围外的时候才会调用，这个也是没想到的，不过并不影响我们的功能。
