javascript - How does SWFUpload work? - Stack Overflow

admin管理员组

文章数量:1023758

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 plete</li>');
        })
        .bind('uploadStart', function(event, file){
            $('#log').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 plete - '+file.name+'</li>');
            // upload has pleted, 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>');
        });

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 plete</li>');
        })
        .bind('uploadStart', function(event, file){
            $('#log').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 plete - '+file.name+'</li>');
            // upload has pleted, 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>');
        });

• javascript
• jquery
• ruby-on-rails
• swfupload

Share Improve this question Follow edited Feb 23, 2011 at 21:12 Christian Fazzini asked Feb 23, 2011 at 21:02 Christian FazziniChristian Fazzini 19.7k2222 gold badges114114 silver badges220220 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

I made two apps here: https://github./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 remend Jquery file upload because it's flash-free.

I also wrote a tutorial here: https://github./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/en/using_files_from_web_applications

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 plete</li>');
        })
        .bind('uploadStart', function(event, file){
            $('#log').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 plete - '+file.name+'</li>');
            // upload has pleted, 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>');
        });

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 plete</li>');
        })
        .bind('uploadStart', function(event, file){
            $('#log').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 plete - '+file.name+'</li>');
            // upload has pleted, 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>');
        });

• javascript
• jquery
• ruby-on-rails
• swfupload

Share Improve this question Follow edited Feb 23, 2011 at 21:12 Christian Fazzini asked Feb 23, 2011 at 21:02 Christian FazziniChristian Fazzini 19.7k2222 gold badges114114 silver badges220220 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

I made two apps here: https://github./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 remend Jquery file upload because it's flash-free.

I also wrote a tutorial here: https://github./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/en/using_files_from_web_applications

本文标签： javascriptHow does SWFUpload workStack Overflow