PHP: Загрузка файлов перетаскиванием (Drag and Drop) с помощью DropzoneJS и PHP

11/12/2021 22:27

В этом руководстве вы узнаете, как загружать файлы с помощью dropzone js в PHP без обновления всей веб-страницы.

Dropzone.js - это легкая библиотека jаvascript, которая превращает HTML-элемент в зону перетаскивания. Пользователи могут перетаскивать файл в область страницы, загружая его на сервер.

Обратите внимание, что всегда предпочитайте использовать dropzone js для перетаскивания нескольких файлов, загружаемых в каталог и базу данных. Здесь вы шаг за шагом научитесь интегрировать dropzone js в PHP с html и загружать несколько файлов с функцией перетаскивания.

Загрузка файла перетаскиванием с помощью кнопки отправки в PHP с использованием Dropzone.js

Выполните следующие шаги и загрузите файл с помощью dropzone js и jquery без обновления всей веб-страницы в PHP:

Шаг 1 - Создайте файл index.php

Прежде всего, создайте файл index.php и обновите приведенный ниже HTML-код в своем файле index.php.

<!DOCTYPE html>
<html>

<head>
    <title>PHP Dropzone File Upload Example Tutorial</title>
    <!-- Bootstrap Css -->
    <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 File Upload on Button Click Example</h2>
                <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
                    <div>
                        <h3>Upload Multiple Image By Click On Box</h3>
                    </div>
                </form>
                <button id="uploadFile">Upload Files</button>
            </div>
        </div>
    </div>

    <script type="text/jаvascript">
        Dropzone.autoDiscover = false;

        var myDropzone = new Dropzone(".dropzone", {
            autoProcessQueue: false,
            maxFilesize: 1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"
        });

        $('#uploadFile').click(function() {
            myDropzone.processQueue();
        });
    </script>

</body>

</html>

Этот HTML-код показывает форму загрузки изображений, поэтому с помощью этой формы вы можете загружать изображения в таблицу БД и папку проекта.

Шаг 2 - Создайте файл upload.php

На этом этапе создайте новый файл с именем upload.php и обновите в нем приведенный ниже код.

<?php
 
 
$uploadDir = 'uploads';
 
 
if (!empty($_FILES)) {
 $tmpFile = $_FILES['file']['tmp_name'];
 $filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($tmpFile,$filename);
}
 
 
?>

Этот код PHP загрузит файл в каталог проекта и изменит имя загружаемого файла.

Шаг 3 - Создайте каталог uploads

На этом этапе вам необходимо создать в каталоге проекта каталог с именем uploads.

В этом руководстве вы узнали, как загружать файлы с помощью dropzone js в PHP без обновления всей веб-страницы.

PHP / Javascript / Jquery

0 + 0 -

MakeCodes
0
727