多项目上传文件解决方案之：Flash上传插件

这个插件的主要功能是上传单一文件。暂时没有考虑多文件上传功能。在这里主要介绍下相关参数及flash实现。

主要参数及说明：

     config：用来确定使用哪一个配置文件。

     type：确定使用哪一个分类。

     jsFunName：上传完成后，回调的js方法名称。

flash实现主要思路流程：

      1、加载时根据传递参数去中转服务器上获取相关的参数（上传文件大小、文件类型）。需要中转服务器对外提供一个接口。接口下面有详细介绍。

      2、当用户选择上传文件时做出相应的判断处理（文件大小是否在指定的范围内、文件类型是否允许上传）。

      3、当用户选择的文件符合要求是，调用相关接口，上传文件至中转服务器上。同时带上相关的参数（config和type）。这里也需要中转服务器提供一个接口。

为了方便后期其他项目的使用，将中转服务器接口访问地址的根路径写入xml，存放在站点的根目录下。

upload.xml

<?xml version="1.0" encoding="utf-8" ?>
<root>
  <baseURL>http://upload.xxx.com/</baseURL>
</root>

1、为了方便开发中测试，先修改下html模板。加上相关参数。见下图：

1、flash布局

<mx:ProgressBar id="uploadProgressBar" x="4" y="3" width="180" height="24"  maximum="100" minimum="0" labelPlacement="center" mode="manual" label="%3%%" textAlign="center" creationComplete="uploadProgressBar_creationCompleteHandler(event)"/>
    <s:Button id="btnSelect" x="187" y="3" height="24" label="浏览" click="btnSelect_clickHandler(event)"/>
    <s:Label id="lbTips" x="264" y="13" text="{strTips}"/>

说明：mx:ProgressBar：进度条，显示上传进度。

        s:Button：浏览按钮。选择上传文件。

        s:Label：提示标签。各种错误提示。strTips为元数据。

2、addedToStage事件：addedToStageHandler

protected function addedToStageHandler(event:Event):void
{
    //---- 获取参数
    var appconfig:String = this.loaderInfo.parameters['appconfig'];
    var type:String = this.loaderInfo.parameters['type'];
    jsFunName = this.loaderInfo.parameters['jsfun'];
    
    if(StringUtil.isNullOrEmpty(appconfig)){
        strTips='缺少参数';
        return;
    }
    if(StringUtil.isNullOrEmpty(type)){
        strTips='缺少参数[type]';
        return;
    }
    if(StringUtil.isNullOrEmpty(jsFunName)){                
        strTips='缺少参数[jsfun]';
        return;
    }
    loadXml(appconfig,type);                
}

3、读取配置文件：LoadXml

//加载xml配置路径
protected function loadXml(appconfig:String,type:String):void{
    var xmlLoader:URLLoader = new URLLoader();
    var xmlData:XML = new XML();
    xmlLoader.addEventListener(Event.COMPLETE, onLoadXML);
    xmlLoader.addEventListener(IOErrorEvent.IO_ERROR,ioError);
    xmlLoader.load(new URLRequest("/upload.xml"));
    //加载成功
    function onLoadXML(ev:Event):void{
        xmlData = new XML(ev.target.data);
        baseURL=xmlData.baseURL;
        loadConfig(appconfig,type);
    }
    //io.error
    function ioError(e:IOErrorEvent):void{
        strTips='xml文件读取失败';
    }
}

4、加载配置文件：LoadConfig

//加载配置信息 获取上传的文件类型及大小
protected function loadConfig(appconfig:String,type:String):void{
    //---上传类型文件等参数
    var request_config:String = StringUtil.format('appconfig={0}&type={1}',appconfig,type);
    //上传文件大小类型配置
    var req:URLRequest = new URLRequest(baseURL+'/upload/get_config');
    req.data = request_config;
    req.method='POST';
    var loader:URLLoader = new URLLoader();
    loader.addEventListener(Event.COMPLETE,function(e:Event):void{
        var ary:Array = loader.data.split('|');
        allowFileSize = parseInt(ary[0]);
        allowFileExt = ary[1];
        allowAryFileExt =ary[1].split(';');
        var dot:RegExp = /\./gi;
        allowFileFilter=allowFileExt.replace(dot,'*.');
        
        if(allowFileSize>0){
            init(request_config);
        }else{
            strTips = StringUtil.format('[{0}.{1}]配置错误',appconfig,type);
        }
    });
    loader.load(req);
}

5、加载完成配置信息后可以设置自定义事件及初始化相关变量：init

//----自定义的加载事件
protected function init(request_config:String):void
{
    // 定义上传请求                
    urlrequest = new URLRequest(baseURL+'/upload');
    urlrequest.data = request_config;
    // 绑定上传事件
    fileRef.addEventListener(Event.SELECT,fileSelectHandler);
    fileRef.addEventListener(ProgressEvent.PROGRESS,function(event: ProgressEvent): void
    {
        uploadProgressBar.label = '%3%%';
        uploadProgressBar.setProgress(event.bytesLoaded, event.bytesTotal);
        if(event.bytesLoaded==event.bytesTotal){
            uploadProgressBar.label = '上传完成，处理中...';
        }
     });
    fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadImageCompleteHandler);            
}

6、选择文件：btnSelect_clickHandler

//----选择文件
protected function btnSelect_clickHandler(event:MouseEvent):void
{
    if(allowFileFilter.length>0){
        fileRef.browse([new FileFilter('允许文件('+allowFileFilter+')', allowFileFilter),
                        new FileFilter("所有文件(*.*)", "*.*")
                                ]);
    }
}

7、文件选择完成，文件判断：fileSelectHandler

//文件选择完成
protected function fileSelectHandler(evt:Event):void
{
    //----文件检查-----
    var size:int  =  fileRef.size;
    var ext:String = fileRef.type;

    if(allowAryFileExt==null || allowAryFileExt.indexOf(ext)==-1){
        strTips = '只允许['+allowFileExt+']类型';
        return;
    }
    if(allowFileSize < size){
        strTips = '最大为'+(allowFileSize/1024/1024)+'M.';
        return;
    }
    urlrequest.method='POST';
    fileRef.upload(urlrequest,'file_data');
    btnSelect.enabled=false;//上传中设置浏览按钮不可用
}

8、文件上传完成：uploadImageCompleteHandler

//文件上传完成
protected function uploadImageCompleteHandler(evt:DataEvent):void {
    var upload_data:Object = com.adobe.serialization.json.JSON.decode( evt.data);
    uploadWait();
    btnSelect.enabled=true;
    if(upload_data.hasOwnProperty('error_code')){
        strTips = '错误代码：'+upload_data.error_code;
    }else if(upload_data.hasOwnProperty('fileid') && upload_data.hasOwnProperty('source')){
        strTips = '上传成功';
        ExternalInterface.call(jsFunName,upload_data.fileid,upload_data.source);
    }
}

 

到此为止，基本上一个上传单一文件的flash就开发完成了。