Загрузка файлов на сервер перетаскиванием в зону приёма.
Вариант реализации на HTML, AJAX, PHP.
В современных разработках сайтов и интернет сервисов уже практически везде используется загрузка файлов на сервер перетаскиванием из папки расположения в обозначенную на веб странице зону приёма. Это очень удобно, так как в традиционном исполнении загрузка файлов подразумевает поиск целевого файла по дереву диска, что может занимать больше времени, особенно когда файл уже найден и находится перед глазами в открытой папке.
Вот как задачу по загрузки файлов перетаскиванием решил AI ChatGPT-4. Решение рабочее.
Вопрос: Нужна реализация на html, ajax, php загрузить файла на сервер перетаскиванием из папки с исходным файлом на зону приёма. Пример кода с комментированием.
Ответ AI ChatGPT-4:
<div id="dropArea" ondrop="handleDrop(event);" ondragover="handleDragOver(event);"> Drop file here </div>
JS (с использованием библиотеки jQuery):
function handleDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
}
function handleDrop(evt) {
evt.preventDefault();
evt.stopPropagation();
var files = evt.dataTransfer.files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file[]', files[i]);
}
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
console.log(response);
},
error: function(xhr, status, error) {
console.log(error);
}
});
}PHP (в файле upload.php):
if (isset($_FILES['file'])) {
$targetDir = 'uploads/';
$errors = [];
foreach ($_FILES['file']['name'] as $key => $name) {
$targetFile = $targetDir . basename($name);
$tmpName = $_FILES['file']['tmp_name'][$key];
if (move_uploaded_file($tmpName, $targetFile)) {
// файл успешно загружен
} else {
$errors[] = 'Error uploading file ' . $name;
}
}
if (!empty($errors)) {
echo implode(', ', $errors);
}
}В данном примере мы создаем зону приема (dropArea) и определяем две функции - handleDragOver и handleDrop. Первая функция нужна, чтобы предотвратить стандартное поведение браузера при перетаскивании, которое может привести к открытию файла в браузере. Вторая функция обрабатывает событие ondrop и загружает файлы на сервер с помощью ajax-запроса в файл upload.php.
В файле upload.php мы проверяем, что на сервер были загружены файлы, затем перебираем каждый файл, перемещаем его в папку uploads и выводим сообщение об успешной/неуспешной загрузке.
Дата публикации:
ТОП 10 случайных публикаций
Последние публикации
