Glissez-déposez plusieurs fichiers en utilisant JavaScript et PHP

Dernière mise à jour Oct 18, 2021

Teneur

Faites glisser et déposez plusieurs fichiers à l’aide de JavaScript et PHP

Commencer

Comme je l’ai dit, nous n’utiliserons aucun plugin externe pour la fonction glisser-déposer. Je vais écrire tout le code à partir de zéro. C’est beaucoup plus facile. Il n’y a rien de complexe dedans. Suivez simplement les étapes ci-dessous et vous avez terminé.

Créons un fichier index.htmlet ajoutons le code ci-dessous.

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>

Ici, j’ai inclus style.csset custom.jsdans lequel nous allons ajouter un code associé. Comme nous avons l’intention d’utiliser Ajax, j’ai inclus une bibliothèque jQuery.

Pour donner une interface utilisateur de base à notre téléchargeur de fichiers, ajoutons quelques propriétés CSS. Bien sûr, vous pouvez ajouter votre propre CSS pour donner un aspect différent au téléchargeur de fichiers.

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

Après cela, vous devriez voir votre téléchargeur de fichiers comme la capture d’écran ci-dessous :

Faites glisser et déposez plusieurs fichiers à l’aide de JavaScript et PHP

Vous êtes configuré avec l’interface utilisateur de base. Maintenant, nous pouvons aller de l’avant et écrire du code réel pour JavaScript et PHP qui télécharge des fichiers sur un serveur. Dans notre HTML, j’ai ajouté 2 méthodes upload_file() et file_explorer () qui appellent respectivement les fichiers de suppression et les fichiers sélectionnés.

Définissons ces méthodes et passons les fichiers au script côté serveur qui télécharge les fichiers sur un serveur.

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

Enfin, écrivez un code côté serveur pour le téléchargement de fichier dans le ajax.phpfichier.

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;

Ce code crée un répertoire ‘uploads’ sur votre serveur et stocke tous les fichiers dans ce répertoire. Lors du stockage des fichiers sur un serveur, nous nous occupons de conserver le nom unique de chaque fichier téléchargé à l’aide de la fonction PHP uniqid().

Il s’agit de télécharger plusieurs fichiers à l’aide de la fonction glisser-déposer. J’espère que vous l’avez appris. J’aimerais entendre vos pensées et suggestions dans la section des commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net