AJAX запросы JQ / php. Послать файл с формы на контроллер

Question

AJAX запросы JQ / php. Послать файл с формы на контроллер

Макс Авилов Ученик (107), на голосовании 4 месяца назад

Необходимо Аджакс запросом послать файл на контроллер.
Имею следующее
HTML
<label class="input-file" >
<input type="file" name="file" id="file_report">
<span class="btn_file_report">Приложить файл</span>
</label>

Jq (При нажатии на кнопку отправить)
var $input = $("#file_report");
var fd = new FormData;
fd.append('file', $input.prop('files')[0]);
$.ajax({
type: 'POST',
dataType: 'json',
url: '/api/json/sendReport',
data: {
file: fd
}
...
выпадает следующая ошибка

Подскажите, что не так? где поправить?

Answer 1

При передаче файла с помощью AJAX-запроса необходимо сделать несколько важных шагов, чтобы данные передавались корректно и ошибки не возникали. Ваш текущий код содержит ошибку в посылке данных. Давайте разберём правильный способ передачи файла с помощью AJAX и jQuery на сервер.

### HTML
Ваш HTML-код для формы файла в порядке:

  
     
    Приложить файл

### jQuery
Ваш jQuery-код нужно слегка поправить. Основная ошибка заключается в том, что когда вы добавляете FormData в объект данных, jQuery не обрабатывает его как форму, поэтому файл не передается корректно. Кроме того, необходимо добавить правильные заголовки и настройки для отправки файла.

Вот исправленный код на jQuery:

 var $input = $("#file_report"); 
 
$(".btn_file_report").on("click", function() { 
    var fd = new FormData(); 
    fd.append('file', $input.prop('files')[0]); 
     
    $.ajax({  
        type: 'POST',  
        url: '/api/json/sendReport',  
        data: fd,  
        processData: false, 
        contentType: false, 
        dataType: 'json', 
        success: function(response) { 
            console.log(response); // Обработайте успешный ответ 
        }, 
        error: function(jqXHR, textStatus, errorThrown) { 
            console.error(errorThrown); // Обработайте ошибку 
        } 
    }); 
});

### Объяснение

- FormData() создаёт специальный объект для передачи файлов и других данных.
- append метод позволяет добавить файл в объект FormData.
- processData: false отключает преобразование данных в строку запроса. Это необходимо для передачи FormData объекта.
- contentType: false также важно, чтобы позволить браузеру установить правильный заголовок Content-Type, который нужен для отправки файлов.
- dataType: 'json' указывает, что вы ожидаете JSON-ответ от сервера.

### PHP (Контроллер)
Не забудьте правильно обработать файл на серверной стороне. Пример обработки файла в PHP:

 if ($_SERVER['REQUEST_METHOD'] === 'POST') { 
    if (isset($_FILES['file'])) { 
        $file = $_FILES['file']; 
         
        // Путь сохранения файла (например, в папку "uploads") 
        $uploadDir = 'uploads/'; 
        $uploadFile = $uploadDir . basename($file['name']); 
         
        // Проверьте и переместите загруженный файл 
        if (move_uploaded_file($file['tmp_name'], $uploadFile)) { 
            $response = ['status' => 'success', 'message' => 'File uploaded successfully', 'filePath' => $uploadFile]; 
        } else { 
            $response = ['status' => 'error', 'message' => 'Failed to upload file']; 
        } 
         
        echo json_encode($response); 
    } else { 
        echo json_encode(['status' => 'error', 'message' => 'No file uploaded']); 
    } 
} else { 
    echo json_encode(['status' => 'error', 'message' => 'Invalid request method']); 
}

### Заключение

Используя вышеописанный код и советы, вы сможете корректно передать файл с клиента на сервер через AJAX-запрос с использованием jQuery и отобразить ответ.