Dra och släpp flera filöverföringar med JavaScript och PHP

Senaste uppdateringen okt 17, 2021

Innehåll

Dra och släpp flera filer med JavaScript och PHP

Tidigare har jag skrivit en artikel Ladda och släpp filöverföring med JavaScript och PHP. Vissa läsare bad att skriva en artikel om hur man lägger till en filuppladdare som tillåter användare att ladda upp flera filer med dra och släpp-funktionerna.

När du arbetar med en webbapplikation kan du behöva ladda upp flera filer med en enda uppladdare i ditt formulär. Det kan hjälpa en användare att ladda upp enstaka eller flera filer på en gång. De gillar inte att ladda upp flera filer en efter en. Att ge en sådan filuppladdningsfunktion ger en bättre användarupplevelse och påskyndar också din applikation.

I den här artikeln visar jag hur du lägger till den här filöverföraren utan att använda något externt dra och släpp-plugin. Jag laddar upp filerna med Ajax. Det betyder att filer laddas upp på servern utan att en hel sida laddas om.

Komma igång

Som jag sa kommer vi inte använda något externt plugin för dra och släpp-funktionen. Jag ska skriva all kod från början. Det är mycket lättare. Det finns inga komplexa grejer i den. Följ bara stegen nedan så är du klar.

Låt oss skapa en fil index.htmloch lägga till koden nedan i den.

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>

Här inkluderade jag style.cssoch custom.jsdär vi lägger till en relaterad kod. Eftersom vi tänker använda Ajax inkluderade jag ett jQuery-bibliotek.

För att ge ett grundläggande användargränssnitt för vår filuppladdare, låt oss lägga till några CSS-egenskaper. Naturligtvis kan du lägga till din egen CSS för att ge ett annat utseende för filuppladdaren.

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

Efter detta bör du se din filuppladdare som nedan skärmdump:

Dra och släpp flera filer med JavaScript och PHP

Du är inställd på det grundläggande användargränssnittet. Nu kan vi fortsätta och skriva aktuell kod för JavaScript och PHP som laddar upp filer på en server. I vår HTML lade jag till två metoder upload_file() och file_explorer () som får samtal på drop-filer och väljer filer respektive.

Låt oss definiera dessa metoder och skicka filerna till serversidan som laddar upp filer på en server.

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

Skriv slutligen en server-sida kod för filuppladdning i ajax.phpfilen.

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;

Den här koden skapar en "uppladdningskatalog" på din server och lagrar alla filer i den här katalogen. När vi lagrar filer på en server tar vi hand om att behålla det unika namnet på varje uppladdad fil med hjälp av PHP-funktionen uniqid().

Det handlar om att ladda upp flera filer med dra-släpp-funktionen. Jag hoppas att du fick veta om det. Jag skulle vilja höra dina tankar och förslag i kommentarsektionen nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net