Использование input multiple
Сначала создайте форму для загрузки файлов на сервер. Для загрузки нескольких файлов одновременно нужно добавить атрибут multiple
в тег input
.
<form>
<input type="file" name="files[]" multiple>
<button type="button" id="uploadBtn">Загрузить</button>
</form>
Отправка файлов на сервер
Чтобы отправить файлы на сервер, мы будем использовать Jquery Ajax. Создайте обработчик события click
на кнопке Загрузить
. В обработчике мы получим файлы из input
, создадим объект FormData
и отправим его на сервер.
$(document).ready(function() {
$('#uploadBtn').click(function() {
// Получаем все выбранные файлы
var files = $('input[name="files[]"]').get(0).files;
if (files.length > 0) {
// Создаем объект FormData
var formData = new FormData();
// Добавляем каждый файл в объект FormData
for (var i = 0; i < files.length; i++) {
var file = files[i];
formData.append('files[]', file, file.name); // Добавляем каждый файл в объект FormData с его именем
}
// Отправляем данные на сервер с помощью Jquery Ajax
$.ajax({
url: 'upload.php', // URL, куда отправляем данные
type: 'POST', // Тип запроса - POST
data: formData, // Данные, которые мы отправляем на сервер
processData: false, // Запрещаем обработку данных в jQuery
contentType: false, // Запрещаем установку заголовка типа контента в jQuery
success: function(response) { // Функция, которая будет выполнена после успешной отправки данных на сервер
console.log(response); // Выводим ответ сервера в консоль
}
});
}
});
});
Обработка файлов на сервере
На сервере мы можем обработать файлы так же, как и одиночные файлы. Используйте цикл для обработки всех файлов.
$files = $_FILES['files'];
// Цикл для обработки каждого файла
for ($i = 0; $i < count($files['name']); $i++) {
$file_name = $files['name'][$i]; // Получаем имя файла
$file_tmp = $files['tmp_name'][$i]; // Получаем временное имя файла
// Перемещаем файл из временной папки в папку uploads с именем, указанным в $_FILES['name']
move_uploaded_file($file_tmp, 'uploads/' . $file_name);
}
В этом примере мы используем цикл for
для обработки каждого файла, загруженного на сервер. Внутри цикла мы получаем имя файла и временное имя файла, а затем перемещаем файл из временной папки в папку uploads
с именем, указанным в $_FILES['name']
. Это позволяет сохранить файл на сервере и обработать его в дальнейшем.
Заключение
Мы использовали Jquery Ajax для отправки файлов на сервер и создали объект FormData
, чтобы отправить несколько файлов одновременно. На сервере мы обработали файлы так же, как и одиночные файлы.