Загрузка файлов на сервер посредством Ajax

В данной статье мы рассмотрим пример загрузки файлов на сервер посредством Ajax. Как вы уже наверное поняли, отправка формы будет производиться без перезагрузки страницы. В значительной степени этот процесс был упрощён после появления возможности загрузки файлов с помощью JQuery. Будет хорошим плюсом если вы имели опыт разработки на JQuery, это упростит понимание примера. Загрузка файлов на сервер будет производиться без использования дополнительных плагинов, не считая самого JQuery. Давайте приступим к реализации формы загрузки файлов.

Форма отправки файла на сервер

Для простоты примера, форма будет содержать базовый минимум элементов. Это файловый input, у которого задана маска для файлов txt и файлов изображений, ссылка, по нажатию которой будет происходить отправка файла по Ajax, и блок с классом ajax-respond в который будут выводиться сообщения.

<input type="file" multiple="multiple" accept=".txt,image/*">
<a href="#" class="submit button">Загрузить файлы</a>
<div class="ajax-respond"></div>

Форму следует разместить в теле документа, кроме того не забудьте подключить JQuery перед кодом обработчика формы. Теперь рассмотрим код обработчика формы на JQuery.

Код обработчика формы на JQuery

Логика работы кода сводиться к тому, что при срабатывании события change на поле ввода input[type=file], мы заносим данные поля в переменную file.

var files;
$('input[type=file]').change(function(){
    files = this.files;
});

Получается это первый шаг, когда пользователь просто выбрал нужные файлы для загрузки их на сервер. Следующим шагом является непосредственная отправка файла на сервер. Для этого на ссылку «Загрузить файлы» создаём событие click. Срабатывание данного события будет сигналом для отправки данных из переменной files на сервер, посредством Ajax-запроса.

$('.submit.button').click(function( event ){
    event.stopPropagation();
    event.preventDefault();

	// формируем данные формы для отправки
    var data = new FormData();
    $.each( files, function( key, value ){
        data.append( key, value );
    });

	// отправка данных по Ajax
    $.ajax({
        url: './upload.php',
        type: 'POST',
        data: data, // данные для отправки
        cache: false,
        dataType: 'json',
        processData: false,
        contentType: false,
        success: function( respond, textStatus, jqXHR ){
			// если ошибок отправки не возникало
			if ( typeof respond.error === 'undefined' ){
				var files_path = respond.files;
				var html = '';
				$.each( files_path, function( key, val ){
					html += val +'<br>';
				});
				// вывод ответа от сервера
				$('.ajax-respond').html( html );
			} else {
				console.log('Ошибка отправки файла на сервер: ' + respond.error );
			}
        },
        error: function( jqXHR, textStatus, errorThrown ){
            console.log('При отправке Ajax-запроса возникла ошибка: ' + textStatus );
        }
    });
});

Форма с обработчиком на стороне клиента готова. Теперь самое время создать PHP-обработчик формы на стороне сервера. Задача скрипта будет сводиться к тому, что он будет принимать файлы от формы, и возвращать сообщения об успешной или не успешной загрузке.

PHP скрипт обработчик загрузки формы

На стороне сервера отправляемые с формы файлы будут обрабатываться стандартным способом, посредством данных суперглобального массива $_FILES. Стоит обратить внимание на то, что в нашем примере нет механизмов проверки файлов на корректность, и безопасность. Это сделано для простоты и понимания примера. При использовании этих примеров, вам это так же следует учитывать, и вносить коррективы, чтобы обезопасить свой проект от нежелательных манипуляций с файлами на сервере.

<?php

$data = array();
if ($_FILES){

    $error = false;
    $files = array();

    $uploaddir = './uploads/';
    if(!is_dir($uploaddir))
		mkdir( $uploaddir, 0777 );
 
    // переместим файлы из временной директории в указанную
    foreach( $_FILES as $file ){
        if( move_uploaded_file( $file['tmp_name'], $uploaddir . basename($file['name']) ) ){
            $files[] = realpath( $uploaddir . $file['name'] );
        } else {
            $error = true;
        }
    }
    $data = $error ? array('error' => 'Ошибка загрузки файлов.') : array('files' => $files );
    echo json_encode( $data );
}

Файлы будут загружены в директорию uploads, которая будет создана если её нет. Копирование файлов из временной директории в постоянную выполняется в цикле, путём перебора содержимого суперглобальной переменной $_FILES. При возникновении ошибок при загрузке файлов, в переменную $data будет добавлена запись с сообщением «error». Значение переменной будет отправлено в качестве ответа скрипта. Сообщение в этом случае будет показано на форме, в блоке с классом ajax-response. Собственно, это базовые вещи, которые помогут реализовать форму отправки файлов на сервер. Переделать её под свои задачи не составит большого труда.