...
✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Перетягніть завантаження файлів за допомогою JavaScript та PHP

53

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