Jquery form upload plugin: how to reduce it to one click?

Question

I am using jquery form plugin to handle uploading files,

This is my form,

    <form action="upload.php" method="post" enctype="multipart/form-data" id="myForm">
  <input type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>    

The jquery,

    $('#myForm').submit(function() {

        $(this).ajaxSubmit({
        target: '#output'
        });

        return false;

   });

The fallback of this idea is that you have to click twice before uploading the files - you have to click to browse the files and then clicking the submit button.

How can I reduce it to one click? Ideally I want it to trigger the submit automatically when you have selected the files from the desktop and click ok on the browse window/ popup.

Is it possible?

Another note: why it does not work on Chrome, IE, and Safari (it only works on Firefox and Opera) - the form will be submitted on these browsers but I have already set the submit() to return false?

Shemikashemite

Answer 1

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';
    alert("value changed submit the form here");
    $('input[type=text]').val(val);
});

http://jsfiddle.net/CSvjw/82/

Leakage

Thanks. It works perfectly! Can I ask what these line do? var vals = $(this).val(), val = vals.length ? vals.split('\\').pop() : ''; $('input[type=text]').val(val);? No error occurs at all if I comment them out. Thanks. – Shemikashemite

well then remove these lines they are un-necessary, pop is used to remove the last value from array – Leakage

Answer 2

You will need to set up an event handler on the input that handles the file and link it to the "changed" event handler. This way when ever the file name is changed by the user the function you call could see if the file exists and then submit the form automatically.

The "Jquery way" of preventing the default event from occurring is event.preventDefault(). This is probably equal to return false however when using it ive never had issues. Another thing may be that you are having a script error on those browsers which is preventing the return false. You can do this by changing your event handler to look like the following

    function(event)  {
       event.preventDefault();
       // Do stuff here
    }

Crevasse

return false does two things, it stops propagation aka bubbling of the event and also prevents the default behavior of the event where as you can separately call these as event.preventDefault(); and event.stopPropagation(); – Leakage