Submitting image files with Ajax in PHP

Question

I'm very new to Ajax and PHP. I'm using below code to submit my HTML form via Ajax but image files aren't passed through. I tried adding contentType in the code still no luck. Please help can I use the same code (with tweaks) to submit the image files along with text inputs?

Here is the code:

$(document).ready(function() {
    $("#submit_form").submit(function() {       
        $.ajax({
            type: "POST",
            url: 'inc/submit_form.php',
            data:$("#submit_form").serialize(),
            success: function (data) {  
                // Inserting html into the result div on success
                $('#form-result').html(data);
            },
            error: function(jqXHR, text, error){
            // Displaying if there are any errors
                $('#form-result').html(error);           
        }
    });
        return false;
    });
});

serializing form only compiles values, it won't include files Use google to learn how to do uploads with ajax — charlietfl, Jul 18 '15 at 13:12
This [question has already been answered](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — Callum, Jul 18 '15 at 13:13
You can find better way to do it here http://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload — Shehary, Jul 18 '15 at 13:18
@charlietfl: Thanks for the answer, I was wondering if any modifications to the same code would let me push my files through the form. — Rehmat, Jul 18 '15 at 13:38
**Note**, add this enctype="multipart/form-data" to your form in order to submit files — Ahmed I. Elsayed, Nov 01 '19 at 22:31

Samuel Cook · Accepted Answer · 2015-07-18T13:42:06.740

This is only the AJAX section of the script, but this is what I have used in the past. I've commented each line for an explanation:

<script type="text/javascript">

var files = $('#TARGET_TO_FILES_INPUT').prop('files');

var data = new FormData();

$.each(files, function(key,val){
    data.append(key,val);
});


$.ajax({
    type:"POST",// post method
    url:UPLOAD_FILE,// path to file upload
    data:data,// image and any other form data
    cache:false,// stop any caching of browser
    dataType:'json',// return json when complete
    processData:false,// stop preprocessing of data by jquery (ie querystring)
    contentType:false,// must be set to false; turns off default "application/x-www-form-urlencoded; charset=UTF-8"
    success:function(o){
        // successful upload stuff goes here
    },
    xhr:function(){
        var xhr = $.ajaxSettings.xhr() ;

        xhr.upload.onprogress = function(evt){ 
            //progress bar stuff goes here
        }
        xhr.upload.onload = function(){
            //just before upload stuff goes here
        }

        return xhr ;
    }
});

</script>

Submitting image files with Ajax in PHP

1 Answers1