Ajax POST input file to PHP

Question

I'm trying to POST the html input file to my PHP file, instead of using the traditional synchronous html forms.

The issue i'm facing is that i'm don't think im POST'ing the input file correctly to my PHP file because my PHP file is saying that its not receiving any POST data.

HTML:

<form id="uploadForm">
    Begin by uploading a file (<5mb): <br> <br>
    <span class="btn btn-info btn-file" id="buttonColor">
        Browse... <span class="glyphicon glyphicon-folder-open"></span><input type="file" id="uploadBrowseBtn" name="uploadBrowseBtn" onchange='$("#upload-file-info").html($(this).val());'>
    </span>
    <br>
    <span class='label label-info' id="upload-file-info">Choose a file.</span>
    <br> <br>
    <input type="button" class="btn btn-info" id="uploadSubmitBtn" value="Upload">
</form>

JS:

$("#uploadSubmitBtn").click( function() {
    var formData = new FormData($('#uploadForm')[0]);
    $.ajax({
        url: '/upload.php',
        data: formData,
        async: false,
        contentType: false,
        processData: false,
        cache: false,
        type: 'POST',
        success: function(data)
        {

        },
    })
});

PHP:

<?php
    if(empty($_POST)){
        echo true;
    }else{
        echo false;
    }
?>

Why not just use [`.serialize()`](https://api.jquery.com/serialize/)? Wouldn't that be a lot easier than converting the element to the native DOM and using `FormData()`? — Noble Mushtak, Aug 23 '15 at 13:25
Try using `$("#uploadForm").serialize()` instead of `FormData()` and see what happens. Also, check the "Console" tab of your JavaScript console to make sure that there are no errors. — Noble Mushtak, Aug 23 '15 at 14:18
Where do i find the JavaScript console? I only know of the Console window for Google Chrome — Shawn Andrews, Aug 23 '15 at 14:34
The "Console" window for Google Chrome is exactly what I'm talking about. Make sure that there are no errors from your AJAX request in there. — Noble Mushtak, Aug 23 '15 at 14:44

score 0 · Accepted Answer · edited May 23 '17 at 12:06

PHP puts posted files in the _FILE variable: http://php.net/manual/en/reserved.variables.files.php

So even if the posting jquery part is working correctly, you could not see if a file was received by checking if the _POST variable is empty in PHP.

I'm not very good at jQuery, but this should do what you want.

$( document ).ready(function() {
    $('#uploadSubmitBtn').on('click', function() {
        var file_data = $('#uploadBrowseBtn').prop('files')[0];   
        var form_data = new FormData();
        form_data.append('file', file_data);                        
        $.ajax({
            url: 'upload.php',
            dataType: 'text',
            cache: false,
            contentType: false,
            processData: false,
            data: form_data,                         
            type: 'post',
            success: function(data){
                $('#uploadForm').html(data);
            }
        });
    });
});

<form id="uploadForm">
<input type="file" id="uploadBrowseBtn">
<input type="button" id="uploadSubmitBtn" value="Upload">
</form>

<?php
    var_dump($_POST);   // empty when received a file
    var_dump($_FILES);  // filled when received a file
?>

This question: jQuery AJAX file upload PHP answers your question, and has a perfect explanation to what it actually does.

I see, i see. How would i access the file in PHP, $_FILES["uploadBrowseBtn"]? — Shawn Andrews, Aug 23 '15 at 14:39
Also the var dump was "array(0) { } array(1) { ["file"]=> array(5) { ["name"]=> string(20) "jquery-1.10.2.min.js" ["type"]=> string(22) "application/javascript" ["tmp_name"]=> string(27) "C:\Windows\Temp\php3DF6.tmp" ["error"]=> int(0) ["size"]=> int(94140) } }" — Shawn Andrews, Aug 23 '15 at 14:42
So, as you can see the file is stored on a temporarily location on the server: ['tmp_name']. You now can move it to the desired location by using the fucntion move_uploaded_file(): http://php.net/manual/en/function.move-uploaded-file.php — Fin, Aug 23 '15 at 14:46

Ajax POST input file to PHP

1 Answers1