Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Ajax Upload Files With the HTML5 FormData

    • 0
    • 4
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 562
    Comment on it

    If you are making a Ajax request to submit a form that include files then HTML5 FormData is the solution for that. You can also used jQuery form for upload files using Ajax request.

    First, we need to add jQuery code to submit function which is called when our form will be submitted.

        var form = $('#IdOfForm');
        var formdata = false;
        if (window.FormData) {
            formdata = new FormData(form[0]);
        }
    
        $.ajax({
            url         : '/upload.php',
            data        : formdata,
            cache       : false,
            contentType : false,
            processData : false,
            type        : 'POST',
            success     : function(data, textStatus, jqXHR){
                // Callback code
            }
        });
    

    The FormData constructor encode all field to key/value pairs that exist in current form. The code for upload or copy the file will be written in upload.php file as per your need.

    FormData is supported in all modern browsers. Only IE9 and below will cause issue.

    Note: Don't forget to add enctype="multipart/form-data" to the form tag.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: