Загрузка файлов методом перетаскивания с использованием DropzoneJS и PHP
Добавить в избранное
В этом руководстве вы узнаете, как загружать файлы с помощью dropzone js в PHP без обновления всей веб-страницы.
Обратите внимание, что всегда предпочтительнее использовать dropzone js для перетаскивания нескольких файлов, загружаемых в каталог и базу данных. И вы шаг за шагом узнаете, как интегрировать js dropzone в PHP с html. И загрузите несколько файлов с помощью функции перетаскивания.
Перетаскивание загрузки файла с помощью кнопки «Отправить» в PHP с использованием Dropzone
Выполните следующие шаги и загрузите файл с помощью dropzone js и jquery, не обновляя всю веб-страницу в PHP:
• Шаг 1 – Создайте index.php
• Шаг 2 – Создайте файл upload.php
• Шаг 3 – Создать каталог
Шаг 1 – Создайте index.php
создайте файл index.php и вставьте приведенный ниже HTML-код в свой файл.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Пример загрузки файла PHP Dropzone при нажатии кнопки</h2>
<form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
<div>
<h3>Загрузить несколько изображений, нажав на поле</h3>
</div>
</form>
<button id="uploadFile">Загрузить файлы</button>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
let myDropzone = new Dropzone(".dropzone", {
autoProcessQueue: false,
maxFilesize: 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
});
$('#uploadFile').click(function(){
myDropzone.processQueue();
});
</script>
</body>
</html>
Шаг 2 – Создайте файл upload.php
На этом шаге создайте новый файл с именем upload.php и вставьте приведенный ниже код в файл.
$uploadDir = 'uploads';
if (!empty($_FILES)) {
$tmpFile = $_FILES['file']['tmp_name'];
$filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
move_uploaded_file($tmpFile,$filename);
}
?>
Шаг 3 – Создать каталог
На этом этапе вам нужно создать каталог в каталоге вашего проекта с именем uploads.