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

Последнее обновление Июл 12, 2021

Содержание

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

Раньше я писал статью «Перетаскивание файлов при помощи JavaScript и PHP». Некоторые читатели попросили написать статью о добавлении загрузчика файлов, который позволяет пользователям загружать несколько файлов с помощью функции перетаскивания.

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

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

Начиная

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

Создадим файл index.htmlи добавим в него код ниже.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Drag Drop Multiple File Upload</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
        <div id="drag_upload_file">
            <p>Drop file(s) here</p>
            <p>or</p>
            <p><input type="button" value="Select File(s)" onclick="file_explorer();"></p>
            <input type="file" id="selectfile" multiple>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="custom.js"></script>
</body>
</html>

Здесь я включил style.cssи custom.jsв который мы добавим связанный код. Поскольку мы собираемся использовать Ajax, я включил библиотеку jQuery.

Чтобы дать базовый интерфейс для нашего загрузчика файлов, давайте добавим некоторые свойства CSS. Конечно, вы можете добавить свой собственный 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 и PHP

У вас установлен базовый интерфейс. Теперь мы можем написать реальный код для JavaScript и PHP, который загружает файлы на сервер. В наш HTML-код я добавил 2 метода upload_file() и file_explorer (), которые получают вызов при перетаскивании файлов и выбирают файлы соответственно.

Давайте определим эти методы и передадим файлы в серверный скрипт, который загружает файлы на сервер.

custom.js

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

Наконец, напишите серверный код для загрузки файла в ajax.phpфайл.

ajax.php

<?php
foreach($_FILES['file']['name'] as $key=>$val){
    $file_name = $_FILES['file']['name'][$key];
 
    // get file extension
    $ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
 
    // get filename without extension
    $filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
 
    if (!file_exists(getcwd(). '/uploads')) {
        mkdir(getcwd(). '/uploads', 0777);
    }
 
    $filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;
    move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store);
}
echo "File(s) uploaded successfully";
die;

Этот код создает на вашем сервере каталог загрузок и сохраняет все файлы внутри этого каталога. При хранении файлов на сервере мы заботимся о сохранении уникального имени для каждого загруженного файла с помощью функции PHP uniqid().

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

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

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