WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

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

2 316

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

Пользовательский интерфейс окончательной загрузки файла будет выглядеть, как показано на рисунке ниже.

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

Зачем нужна функция загрузки файлов перетаскиванием?

Мы всегда хотим, чтобы наш сайт был удобнее для пользователей. Предоставление функции перетаскивания для загрузки файлов – это простой в использовании вариант для ваших пользователей. Многие популярные веб-сайты, такие как Facebook и WordPress, уже используют эту функцию.

Эта функция выглядит лучше по сравнению с традиционным способом загрузки файлов. Это также улучшает взаимодействие с пользователем, поскольку пользователь просто перетаскивает файл и загружает его на сервер.

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

Я собираюсь использовать Ajax для загрузки файлов на сервер. При использовании Ajax ваша страница не загружается. Он просто отправляет файл на сервер в фоновом режиме.

Интегрируйте загрузчик файлов перетаскиванием

Для начала давайте напишем HTML-код. В следующем HTML-коде будет контейнер для загрузки файла. Он также включает файлы CSS и JS, которые я создам на следующих шагах.

<link rel="stylesheet" href="style.css"> <div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">     <div id="drag_upload_file">         <p>Drop file here</p>         <p>or</p>         <p><input type="button" value="Select File" onclick="file_explorer();"></p>         <input type="file" id="selectfile">     </div> </div>   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="custom.js"></script>

В приведенном выше HTML я использовал 2 события – ondrop и onclick. Я определю их методы в custom.jsфайле. Перед этим добавим в style.cssфайл код CSS .

#drop_file_zone {     background-color: #EEE;     border: #999 5px dashed;     width: 290px;     height: 200px;     padding: 8px;     font-size: 18px; } #drag_upload_file {   width:50%;   margin:0 auto; } #drag_upload_file p {   text-align: center; } #drag_upload_file #selectfile {   display: none; }

Наша цель – когда пользователь бросает или просматривает файл, файл должен быть загружен на сервер. Для этого вам нужно написать код JavaScript, который берет файл со стороны клиента и отправляет его на сервер.

Чтобы обработать этот поток, добавьте в custom.jsфайл приведенный ниже код .

var fileobj; function upload_file(e) {     e.preventDefault();     fileobj = e.dataTransfer.files[0];     ajax_file_upload(fileobj); }   function file_explorer() {     document.getElementById('selectfile').click();     document.getElementById('selectfile').onchange = function() {         fileobj = document.getElementById('selectfile').files[0];         ajax_file_upload(fileobj);     }; }   function ajax_file_upload(file_obj) {     if(file_obj != undefined) {         var form_data = new FormData();                          form_data.append('file', file_obj);         $.ajax({             type: 'POST',             url: 'ajax.php',             contentType: false,             processData: false,             data: form_data,             success:function(response) {                 alert(response);                 $('#selectfile').val('');             }         });     } }

Написанный выше код JavaScript автоматически определяет параметры, выбранные пользователем для загрузки файла. Наконец, функция ajax_file_upload()берет объект файла и передает его в файл Ajax.

Загрузить файл на сервер

В файле Ajax я напишу код, который загружает файл на сервер. Создайте файл с именем ajax.phpи добавьте в него приведенный ниже код.

<?php $arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];   if (!(in_array($_FILES['file']['type'], $arr_file_types))) {     echo "false";     return; }   if (!file_exists('uploads')) {     mkdir('uploads', 0777); }   move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. time(). '_'. $_FILES['file']['name']);   echo "File uploaded successfully.";

Этот PHP-код сначала проверяет, существует ли на сервере папка с именем «uploads». В противном случае он создает каталог загрузок и перемещает файл внутри него. Вы можете настроить этот путь к каталогу в соответствии с вашими требованиями.

Надеюсь, вы понимаете, как добавить загрузку файлов перетаскиванием с помощью PHP и JavaScript. Сообщите мне свои мысли и предложения в комментарии ниже.

Статьи по Теме

Источник записи: artisansweb.net

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее