Ajax File Upload on File select not working

Question

I have a ajaxForm jQuery library to do the task have created a sample script as given below:

HTML & JS

<!doctype html>
<body>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>

<form id="myForm" action="" method="post" enctype="multipart/form-data">
     <input type="file" size="60" name="myfile" id="myfile">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>

<div id="message"></div>

<script>
$(document).ready(function()
{


 $('#myfile').change(function(){

    var options = {
url: "doajaxfileupload.php",
    beforeSend: function()
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete)
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },
    success: function()
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },
    complete: function(response)
    {
        $("#message").html("<font color='green'>"+response.responseText+"</font>");
    },
    error: function()
    {
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

    }

};

     $("#myForm").ajaxForm(options);

});
});

</script>
</body>

</html>

No Here, this script works fine when form is submitted using the Submit button.

But I tried the file upload on click/change of file upload button, to upload the file right away without clicking the submit button, but it didn't work.

Ofcourse it doesn't work because the $('#myForm').ajaxForm(options); process on form submit.

Now what could be done in this script to make my requirement work. Please guide.

did you try with $("#myForm").ajaxForm(options).submit() or trigger('submit') ? — Spokey
– Spokey, Commented Jul 25, 2013 at 8:32
you mean inside the same script? And how to use trigger('submit')? — Padyster
– Padyster, Commented Jul 25, 2013 at 8:33
I have removed the PHP tag and the PHP source because it is working and isn't relevant to solving the client side issues. Just to simplify the question. — Scott
– Scott, Commented Jul 25, 2013 at 8:35
$("#myForm").ajaxForm(options).submit() or $("#myForm").ajaxForm(options).trigger('submit') in your ` $('#myfile').change(function(){})` (at the end you have this but without submit) — Spokey
– Spokey, Commented Jul 25, 2013 at 8:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

I changed $("#myForm").ajaxForm(options); to:

$("#myForm").ajaxSubmit(options);

See the working JS Fiddle Demo.

Reason for this change:
You need to use ajaxSubmit so you can manage the events in your options. ajaxForm does not allow you to bind the events because it is 'managed'.

Use ajaxSubmit if you want to bind your own submit handler to the form.

Use ajaxForm when you want the plugin to manage all the event binding for you.

(Source: Comments in the Ajax Form JQuery Plugin)

This is using the Ajax Forms jQuery Plugin. Your HTML has two links to jQuery, should one of them not be to the jQuery forms plugin?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 25, 2013 at 9:11

Scott

21.6k8 gold badges67 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ajax File Upload on File select not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related