File upload using HTML5 along with ajax not working for ajax loaded form

Question

I have a form which is loaded from ajax response that contains some textarea and a file upload option. My form looks like this..

<form name="myFm" id="myFm" enctype="multipart/form-data">
    <table>
            <tr>
                <td valign="top">
                    <label>My Label</label>
                </td>
                <td>
                    <textarea name="myText" id="myText"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label>File Upload</label>
                </td>
                <td>
                    <input type="file" id="files" name="myFile" value="Upload" /> 
                </td>
            </tr>
            <tr>
                <td>
                  <input type="button" name="fmSub" value="Submit" onclick="myAjaxFunction();" />
                </td>
            </tr>
    </table>
</form>

The form will be submitted with an ajax function to my PHP script. I tried to use the below jquery script to verify the upload file.

$(':file').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    if(name.length > 0)
    alert(name);
    //your validation
 });

This script is working for a normal html form, but not working for my ajax loaded form. Any help will be appreciated. Thanks..

My problem is i'm unable to get the file details with that jquery script. I suppose its not working because my form is ajax loaded. I tested that script with a normal html form and its working. — manugdas
– manugdas, Commented Oct 20, 2012 at 13:50

Teemu Ikonen · Accepted Answer · 2012-10-20 15:39:12Z

1

Where do you set that handler, before the form is loaded? In that case try this

$(':file').live('change', function(){
    ...
}

answered Oct 20, 2012 at 15:39

Teemu Ikonen

12k4 gold badges25 silver badges35 bronze badges

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

1 Comment

Jon Rubins Over a year ago

"live()" is deprecated. You should use "on()"

Collectives™ on Stack Overflow

File upload using HTML5 along with ajax not working for ajax loaded form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related