Javascript调用Flash函数上传文件

Question

I was wondering if i could get som suggestions on what the best approach to do the following would be...

I am currently calling a Flash AS3 function from Javascript (using jQuery) this function uploads a file which has already been selected in this flash file. Flash then uploads the file and calls a php file (upload.php) which handles the processed file. This all works fine. However there are other details that are filled out that pertain to the file uploaded (entered by the user in textboxes) All this data including the file path to where it has been uploaded must then be saved to a DB. Which can be done through an ajax call to another php file (processData.php). My issue is that when i upload the file i cant send the other details along with the file through flash (atleast not that i know of) which causes 2 different php scripts to execute. Secondly the other php script called through ajax doesnt have the file information to add to the DB. I can store this info in a session if i want but it just doesnt seem to convince me as the best way to go about this. Any other ideas or suggestions?

There is quite a bit of code I have so to avoid making this a HUGE question ill post the JS part that i think is important and some snippets of flash so you can have an idea of whats going on... If theres anyhting else youd like to see of the code feel free to ask and ill post it...

JS:

$("#uploadAudio").submit(function(event) {
    event.preventDefault();

    var form = $(this);
    var title = form.find("#title").val();
    var desc = form.find("#desc").val();

    var flash = $("#flash");

    var flashFileSet = flash.get(0).jsIsFileSelected();

    if(flashFileSet)
    {
        $.ajax({
            type: "POST",
            url: "processData.php",
            dataType: "text",
            data: "title=" + title + "&desc=" + desc,
            async: false,
            success: function() {
                audFile.get(0).jsUploadFile();
            }
        });
    }
});

Flash

public function fUploader(){
        req = new URLRequest();
        req.url = ( stage.loaderInfo.parameters.f )? stage.loaderInfo.parameters.f : 'http://virtualmanagementonline.com/ajax/audUpload.php';
        pFilterType = ( stage.loaderInfo.parameters.filterType )? stage.loaderInfo.parameters.filterType : 'Images';
        pFileFilters = ( stage.loaderInfo.parameters.fileFilters )? stage.loaderInfo.parameters.fileFilters : '*.jpg;*.jpeg;*.gif;*.png';
        file = new FileReference();
        setup( file );
        select_btn.addEventListener( MouseEvent.CLICK, browse );
        progress_mc.bar.scaleX = 0;
        tm = new Timer( 1000 );
        tm.addEventListener( TimerEvent.TIMER, updateSpeed );
        cancel_btn.addEventListener( MouseEvent.CLICK, cancelUpload );
        cancel_btn.visible = false;

        ExternalInterface.addCallback("jsUploadFile", uploadFile);
        ExternalInterface.addCallback("jsIsFileSelected", IsFileSelected);
    }

public function browse( e:MouseEvent ){
        filefilters = [ new FileFilter(pFilterType, pFileFilters) ];            file.browse( filefilters );
    }

private function selectHandler( e:Event ){
        var tf = new TextFormat();
        tf.color = 0x000000;
        label_txt.defaultTextFormat = tf;
        label_txt.text = file.name;
        //file.upload( req );
    }

    public function IsFileSelected():Boolean{
        if(label_txt.text != "")
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    public function uploadFile():void{
        file.upload(req);
    }

**Note: NOT all the flash code is shown since there is alot. I put up what i thought was needed to get an understanding of what exactly is going on.

If there is anything i can add for further details please let me know. Thanks in advance!

Answer 1

You can send as many data as you want to flash, since ExternalInterface is available.
ActionScript 3 Reference states the following about ExternalInterface:

From JavaScript on the HTML page, you can:
- Call an ActionScript function.
- Pass arguments using standard function call notation.
- Return a value to the JavaScript function.

All you have to do is register an ActionScript function/method as callable from the container:

ActionScript

...
ExternalInterface.addCallback("jsUploadFile", uploadFile);
...

public function uploadFile (title:String, desc:String):void
{
    var infos:URLVariables = new URLVariables();
    infos.desc = desc;
    infos.title = title;

    /* When you pass the URLVariables to data property of URLRequest,
      all variables associated with the URLVariables object will be
      sent to the server along with the image uploaded. */
    req.data = infos;

    file.upload(req);
}

Then, call it from the container (HTML) passing the additional information as parameters.

JavaScript

$("#uploadAudio").submit(function(event) {
    event.preventDefault();

    var form = $(this);
    var title = form.find("#title").val();
    var desc = form.find("#desc").val();

    var flash = $("#flash");

    var flashFileSet = flash.get(0).jsIsFileSelected();

    if(flashFileSet)
    {
       /* Instead of sending title and desc to the server via ajax, pass
          them as parameters to the jsUploadFile method. So
          you can handle everything in one place */
       audFile.get(0).jsUploadFile(title, desc);
    }
});

Hope it helps.