I am using the AjaxFileUpload script and it works well, however i was trying to get it to require the pressing of a button. Right now it fires directly after you find your image to upload on the file browser. I cannot tell why and I think it is how the plugin is written, but maybe you can take a look at the logic:

This method works: The file is uploaded right after it is submitted.

<form method="post" action="" enctype="multipart/form-data">
    <label>File Input: <input type="file" name="file" id="demo1" /></label>
    <div id="uploads">

    </div>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $("#demo1").AjaxFileUpload({

    });
</script>

This method does not work. Clicking the Submit button will do nothing. However, the second time a file is browsed to (file button is clicked for a second time) it will operate in the same manner as the first method.

<form method="post" action="" enctype="multipart/form-data">
    <label>File Input: <input type="file" name="file" id="demo1" /></label>
    <div id="uploads">

    </div>
</form>
<input class = "Submit" name="Submit" type="button" value="Submit" />
<script type="text/javascript">
    $(document).ready(function() {
        $(".Submit").click(function(){
            $("#demo1").AjaxFileUpload({

            });
        });
    });
</script>

I think there is a fundamental programming issue here I am missing. If you are interested in the (short) code of this plugin here is the link: .ajaxfileupload.js

I am using the AjaxFileUpload script and it works well, however i was trying to get it to require the pressing of a button. Right now it fires directly after you find your image to upload on the file browser. I cannot tell why and I think it is how the plugin is written, but maybe you can take a look at the logic:

This method works: The file is uploaded right after it is submitted.

<form method="post" action="" enctype="multipart/form-data">
    <label>File Input: <input type="file" name="file" id="demo1" /></label>
    <div id="uploads">

    </div>
</form>
<script type="text/javascript">
    $(document).ready(function() {
        $("#demo1").AjaxFileUpload({

    });
</script>

This method does not work. Clicking the Submit button will do nothing. However, the second time a file is browsed to (file button is clicked for a second time) it will operate in the same manner as the first method.

<form method="post" action="" enctype="multipart/form-data">
    <label>File Input: <input type="file" name="file" id="demo1" /></label>
    <div id="uploads">

    </div>
</form>
<input class = "Submit" name="Submit" type="button" value="Submit" />
<script type="text/javascript">
    $(document).ready(function() {
        $(".Submit").click(function(){
            $("#demo1").AjaxFileUpload({

            });
        });
    });
</script>

I think there is a fundamental programming issue here I am missing. If you are interested in the (short) code of this plugin here is the link: https://github./davgothic/AjaxFileUpload/blob/master/jquery.ajaxfileupload.js

• javascript
• jquery
• ajax
• forms

Share Improve this question Follow edited Apr 16, 2014 at 5:26 Madhu 2,55133 gold badges2020 silver badges3434 bronze badges asked Apr 16, 2014 at 4:47 user3479138user3479138 5733 silver badges77 bronze badges 2

• use https://github./LPology/Simple-Ajax-Uploader with callback functions onChange( filename, extension, uploadBtn ) or onSubmit( filename, extension, uploadBtn ) – waki Commented Apr 16, 2014 at 5:25
• have't find submit button in first html code !!! – Manwal Commented Apr 16, 2014 at 5:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You have probably got a fix for this at this point. But for the sake of others that could be ing in here to find an answer for the same problem, here is how it's done.

There is a parameter in the ajaxfileupload method call, called submit_button. If you set that, the file will NOT be automatically uploaded when you select it. The method will actually wait for you to press the specified button for the upload to happen.

Based on the example you provided, this would do it:

Add an ID to the submit button (haven't tested with the JQuery class specifier):

<input class = "Submit" name="Submit" id="Submit" type="button" value="Submit" />

Then add the submit_button parameter:

$("#demo1").AjaxFileUpload({
    // other parameters omitted like in example provided
    'submit_button': $('#Submit')
});

Use this:

<script type="text/javascript">
    $(document).ready(function() {
        $("#demo1").AjaxFileUpload({

            });

        $(".Submit").click(function(){
            $("#myform").submit();
        });

    });
</script>

myform is the id of form.

HTML:

<form method="post" action="" enctype="multipart/form-data" id="myform">
    <label>File Input: <input type="file" name="file" id="demo1" /></label>
    <div id="uploads">

    </div>
</form>
<input class = "Submit" name="Submit" type="button" value="Submit" />