使用 AJAX 和 PHP 上传文件

Question

I am trying to upload a file to a directory using AJAX and PHP. However I think there is an error with AJAX passing the file into PHP.

<form class="csvUpload" enctype="multipart/form-data">
    <input type="file" class="insertCsv" name="csvUpload"></input>
    <input type="submit" class="insertButton"></input>
</form>

AJAX:

$(".csvUpload .insertButton").click(function() {
    event.preventDefault();

    var file = $(".csvUpload .insertCsv").prop('files')[0];
    var data = new FormData();

    data.append('file', file);

    $.ajax({
        url: '/scripts/csvUpload.php', 
        type: 'POST', 
        dataType: 'json', 
        data: ({data}),
        processData: false,
        contentType: false,   
        success: function(data) {
            $(.output).text(data);
        }
    });
});

PHP:

$file = $_FILES['file']['tmp_name'];
$directory = $_SERVER['DOCUMENT_ROOT'] . '/imports/' . $_FILES['file']['name'];

if(move_uploded_file($file, $directory)) {
    echo('Success');
}
else {
    echo json_encode('Error');
}

I have tried various ways of passing the formdata, but everytime I get the 'Error' Output. How can I correctly pass the file and check that it is even being picked up?

Answer 1

data: ({data}),

You are passing a simple object and telling jQuery not to process it. It will get stringified and the data you end up posting will be "[object Object]" .

You need to pass your FormData object. Only your FormData object. And not wrap it in anything.

data: data,

Answer 2

Here I'm with solution, to upload image/file using Ajax . Follow the below code.

HTML:

<form class="csvUpload" enctype="multipart/form-data">
    <input type="file" class="insertCsv" name="csvUpload"></input>
    <input type="submit" class="insertButton"></input>
</form>

Jquery/Ajax:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.insertButton').on('click', function(e) { 
e.preventDefault(); 
var url = "/scripts/csvUpload.php";  
var file_data = $(".insertCsv").prop("files")[0]; 
var form_data = new FormData(); 
form_data.append("file", file_data); 
var dataString = 'file_data='+file_data+'&form_data='+form_data;    
form_data.append("data", dataString); 

$.ajax({
        url: "/demo_project/uploade/uploads.php",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(data){
            alert(data); 
        }
    }); 

});
</script>

Uploads.php:

<?php 

define ('SITE_ROOT', realpath(dirname(__FILE__)));
echo SITE_ROOT;
if(isset($_REQUEST['data']) && $_REQUEST['data'] != '') { 
    if ($_FILES['file']['error'] > 0) { 
        echo 'Error: ' . $_FILES['file']['error'] . '<br>'; 
    } else { 
        move_uploaded_file($_FILES['file']['tmp_name'], SITE_ROOT.'/'. $_FILES['file']['name']); 
        echo "success";
    } 
}

?>