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?

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/