CODEWITHSUNDEEP
jqueryformshtmlfile-upload
manugdas
manugdas

Reputation: 31

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

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..

Upvotes: 1

Views: 459

Answers (1)

Teemu Ikonen
Teemu Ikonen

Reputation: 11929

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

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

Upvotes: 1

Related Questions