Przeciągnij i upuść przesyłanie wielu plików za pomocą JavaScript i PHP

Ostatnia aktualizacja paź 18, 2021

Zadowolony

Przeciągnij i upuść wiele plików za pomocą JavaScript i PHP

W przeszłości napisałem artykuł Przeciągnij i upuść przesyłanie plików za pomocą JavaScript i PHP. Niektórzy czytelnicy poprosili o napisanie artykułu na temat dodawania programu do przesyłania plików, który umożliwia użytkownikom przesyłanie wielu plików za pomocą funkcji przeciągania i upuszczania.

Podczas pracy nad aplikacją internetową może być konieczne przesłanie wielu plików za pomocą jednego programu do przesyłania w formularzu. Może pomóc użytkownikowi przesłać jeden lub wiele plików za jednym razem. Nie lubią przesyłać wielu plików jeden po drugim. Zapewnienie takiej funkcji przesyłania plików zapewnia lepsze wrażenia użytkownika, a także przyspiesza działanie aplikacji.

W tym artykule pokażę, jak dodać ten program do przesyłania plików bez użycia zewnętrznej wtyczki „przeciągnij i upuść". Wrzucę pliki za pomocą Ajax. Oznacza to, że pliki zostaną przesłane na serwer bez przeładowywania całej strony.

Pierwsze kroki

Jak powiedziałem, nie będziemy używać żadnej zewnętrznej wtyczki do funkcji przeciągania i upuszczania. Napiszę cały kod od zera. Jest o wiele łatwiej. Nie ma w tym skomplikowanych rzeczy. Wystarczy wykonać poniższe czynności i gotowe.

Stwórzmy plik index.htmli dodajmy w nim kod poniżej.

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>

Tutaj umieściłem style.cssi custom.jsw którym dodamy powiązany kod. Ponieważ zamierzamy używać Ajax, dołączyłem bibliotekę jQuery.

Aby zapewnić podstawowy interfejs użytkownika dla naszego programu do przesyłania plików, dodajmy kilka właściwości CSS. Oczywiście możesz dodać własny CSS, aby zmienić wygląd programu do przesyłania plików.

styl.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;
}

Następnie powinieneś zobaczyć swój program do przesyłania plików, jak na poniższym zrzucie ekranu:

Przeciągnij i upuść wiele plików za pomocą JavaScript i PHP

Jesteś skonfigurowany z podstawowym interfejsem użytkownika. Teraz możemy śmiało pisać kod dla JavaScript i PHP, które przesyłają pliki na serwer. W naszym kodzie HTML dodałem 2 metody upload_file() i file_explorer(), które wywołują odpowiednio pliki upuszczania i zaznaczania plików.

Zdefiniujmy te metody i przekażmy pliki do skryptu po stronie serwera, który przesyła pliki na serwer.

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('');
            }
        });
    }
}

Na koniec napisz w pliku kod po stronie serwera, aby przesłać ajax.phpplik.

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;

Ten kod tworzy na serwerze katalog „uploads” i przechowuje wszystkie pliki w tym katalogu. Podczas przechowywania plików na serwerze dbamy o zachowanie unikalnej nazwy każdego przesłanego pliku za pomocą funkcji PHP uniqid().

Wszystko sprowadza się do przesyłania wielu plików za pomocą funkcji przeciągnij i upuść. Mam nadzieję, że się o tym dowiedziałeś. Chciałbym usłyszeć wasze przemyślenia i sugestie w sekcji komentarzy poniżej.

Powiązane artykuły

Źródło nagrywania: artisansweb.net