How does SWFUpload work?

My code below works, except for the upload part. So far I am able to load the script without any problems, and the file dialogue opens when the a user clicks the upload button.

However, what I am trying to do is to assign the file to a form which contains other text input and text-area elements.

Basically I am trying to do this:

1. User fills the form up with values (i.e. filling up text input, text-area fields)
2. User selects a file using SWFUpload
3. User submits the form

Is it possible to hook the file to a file input element on the form so when the form is submitted manually, all the values are sent on one go?

As far as I know, SWFUpload is used to submit the file automatically on the background on its own... Can this be done manually instead and on one form?

     $('.swfupload-control').swfupload({

        // File Upload Settings
        file_size_limit : "102400", // 100MB
        file_types : "*.*",
        file_types_description : "All Files",
        file_upload_limit : "10",
        file_queue_limit : "0",

        // Button Settings
        button_image_url : "/images/upload_song.gif", // Relative to the SWF file
        button_placeholder_id : "spanButtonPlaceholder",
        button_width: 186,
        button_height: 32,

        // Flash Settings
        flash_url : "/javascripts/swfupload/swfupload.swf"

    });


    $('.swfupload-control')
        .bind('swfuploadLoaded', function(event){
            $('#log').append('<li>Loaded</li>');
        })
        .bind('fileQueued', function(event, file){
            $('#log').append('<li>File queued - '+file.name+'</li>');

          //$('#song_attachment').val(file);

          $('#update-media').parents('li').find('p').remove();
          $('#update-media').parents('li').append('<p>'+(file.name.length >= 45 ? file.name.substr(0, 45) + '...' : file.name)+'</p>');
            // start the upload since it's queued
            //$(this).swfupload('startUpload');
        })
        .bind('fileQueueError', function(event, file, errorCode, message){
            $('#log').append('<li>File queue error - '+message+'</li>');
        })
        .bind('fileDialogStart', function(event){
            $('#log').append('<li>File dialog start</li>');
        })
        .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
            $('#log').append('<li>File dialog complete</li>');
        })
        .bind('uploadStart', function(event, file){
            $('#log')开发者_如何学Python.append('<li>Upload start - '+file.name+'</li>');
        })
        .bind('uploadProgress', function(event, file, bytesLoaded){
            $('#log').append('<li>Upload progress - '+bytesLoaded+'</li>');
        })
        .bind('uploadSuccess', function(event, file, serverData){
            $('#log').append('<li>Upload success - '+file.name+'</li>');
        })
        .bind('uploadComplete', function(event, file){
            $('#log').append('<li>Upload complete - '+file.name+'</li>');
            // upload has completed, lets try the next one in the queue
            $(this).swfupload('startUpload');
        })
        .bind('uploadError', function(event, file, errorCode, message){
            $('#log').append('<li>Upload error - '+message+'</li>');
        });

Sorry, I don't know SWF Upload and am ready to delete this answer if irrelevant... BUT:

I made two apps here: https://github.com/apneadiving/Pic-upload---Crop-in-Ajax

One with Uploadify and one with jQuery-File-Upload.

They both answer your needs (ajax submitting, multiple files upload). I would recommend Jquery file upload because it's flash-free.

I also wrote a tutorial here: https://github.com/blueimp/jQuery-File-Upload/wiki/jQuery-File-Upload-for-Rails-3

No, it's not possible to hook SWFUpload to a file field.

Browsers traditionally don't allow Javascript access to the user's filesystem (there are APIs in the works). SWFUpload gets around this by using Flash APIs to read the file directly from the user's filesystem, and streaming it to a server. To do this Flash needs direct handles to files on the filesystem, which it can't get through the file input or Javascript.

Firefox has some support for the Javascript File API, see https://developer.mozilla.org/en/using_files_from_web_applications