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

问题

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?

回答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/

回答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
    }

来源：https://stackoverflow.com/questions/7131770/jquery-form-upload-plugin-how-to-reduce-it-to-one-click