多項目上傳文件解決方案之：Flash上傳插件

這個插件的主要功能是上傳單一文件。暫時沒有考慮多文件上傳功能。在這裏主要介紹下相關參數及flash實現。

主要參數及說明：

     config：用來肯定使用哪個配置文件。

     type：肯定使用哪個分類。

     jsFunName：上傳完成後，回調的js方法名稱。

flash實現主要思路流程：

      一、加載時根據傳遞參數去中轉服務器上獲取相關的參數（上傳文件大小、文件類型）。須要中轉服務器對外提供一個接口。接口下面有詳細介紹。

      二、當用戶選擇上傳文件時作出相應的判斷處理（文件大小是否在指定的範圍內、文件類型是否容許上傳）。

      三、當用戶選擇的文件符合要求是，調用相關接口，上傳文件至中轉服務器上。同時帶上相關的參數（config和type）。這裏也須要中轉服務器提供一個接口。

爲了方便後期其餘項目的使用，將中轉服務器接口訪問地址的根路徑寫入xml，存放在站點的根目錄下。

upload.xml

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

一、爲了方便開發中測試，先修改下html模板。加上相關參數。見下圖：

一、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爲元數據。

二、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);                
}

三、讀取配置文件：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文件讀取失敗';
    }
}

四、加載配置文件：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);
}

五、加載完成配置信息後能夠設置自定義事件及初始化相關變量：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);            
}

六、選擇文件：btnSelect_clickHandler

//----選擇文件
protected function btnSelect_clickHandler(event:MouseEvent):void
{
    if(allowFileFilter.length>0){
        fileRef.browse([new FileFilter('容許文件('+allowFileFilter+')', allowFileFilter),
                        new FileFilter("全部文件(*.*)", "*.*")
                                ]);
    }
}

七、文件選擇完成，文件判斷：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;//上傳中設置瀏覽按鈕不可用
}

八、文件上傳完成：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就開發完成了。