开发者

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 a开发者_高级运维ction="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?


$('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/


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
    }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜