Ajax POST输入文件到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;
    }
?>

Answer 1

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.