Загрузить файл, используя AJAX и PHP

Question

Я пытаюсь загрузить файл в каталог, используя AJAX и PHP.Однако я думаю, что при передаче AJAX файла в 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');
}

Я пробовал различныеспособы передачи формданных, но каждый раз я получаю вывод «Ошибка».Как я могу правильно передать файл и проверить, что он даже поднят?

Answer 1

Здесь я с решением, чтобы загрузить изображение / файл, используя Ajax.Следуйте приведенному ниже коду.

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";
    } 
}

?>

Answer 2

data: ({data}),

Вы передаете простой объект и говорите jQuery не обрабатывать его.Он будет преобразован в строку, и данные, которые вы в конечном итоге разместите, будут "[object Object]".

Вам необходимо передать объект FormData.Только ваш объект FormData.И ни в коем случае не оборачивайся.

data: data,