Загрузка файла перетаскиванием с помощью 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. Сообщите мне свои мысли и предложения в комментарии ниже.

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

• Перетаскивание нескольких файлов для загрузки с помощью JavaScript и PHP
• Загрузка файла Ajax с помощью PHP и jQuery
  – TinyPNG сжимает изображения с помощью PHP