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

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

2 884

Вы хотите интегрировать функцию загрузки файлов перетаскиванием на свой веб-сайт? Эта функция удобна для пользователя и снижает количество кликов пользователей. В этой статье мы изучаем, как добавить функциональность для загрузки файлов перетаскиванием с помощью 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 для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее