web-dev-qa-db-fra.com

Dropzone.js - Comment changer le nom du fichier avant de le télécharger dans le dossier

J'utilise le script DropzoneJS pour télécharger des images par glisser-déposer, mais maintenant je cherche une solution pour ajouter des horodatages actuels avec un nom de fichier avant de les télécharger dans le dossier du serveur, car je ne suis pas en mesure pour télécharger la même image si le fichier existe déjà dans le dossier.

J'ai également mentionné ci-dessous le lien stackoverflow mais je ne sais pas où l'implémenter.

  1. https://stackoverflow.com/a/23805488/3113858
  2. https://stackoverflow.com/a/19432731/3113858

Voici script dropzone.js pour référence

jqueryimage-uploadingdropzone.js
17
Mr.Happy

Veuillez vérifier le code suivant que j'ai implémenté en utilisant PHP.

Utilisez le code suivant dans votre fichier d'index 

$(document).ready(function() {
            Dropzone.autoDiscover = false;
            var fileList = new Array;
            var i =0;
            $("#some-dropzone").dropzone({
                addRemoveLinks: true,
                init: function() {

                    // Hack: Add the dropzone class to the element
                    $(this.element).addClass("dropzone");

                    this.on("success", function(file, serverFileName) {
                        fileList[i] = {"serverFileName" : serverFileName, "fileName" : file.name,"fileId" : i };
                        //console.log(fileList);
                        i++;

                    });
                    this.on("removedfile", function(file) {
                        var rmvFile = "";
                        for(f=0;f<fileList.length;f++){

                            if(fileList[f].fileName == file.name)
                            {
                                rmvFile = fileList[f].serverFileName;

                            }

                        }

                        if (rmvFile){
                            $.ajax({
                                url: "http://localhost/dropzone/sample/delete_temp_files.php",
                                type: "POST",
                                data: { "fileList" : rmvFile }
                            });
                        }
                    });

                },
                url: "http://localhost/dropzone/sample/upload.php"
            });

        });

Upload.php 

<?php
$ds = DIRECTORY_SEPARATOR;  // Store directory separator (DIRECTORY_SEPARATOR) to a simple variable. This is just a personal preference as we hate to type long variable name.
$storeFolder = 'uploads';   // Declare a variable for destination folder.
if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];          // If file is sent to the page, store the file object to a temporary variable.
    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  // Create the absolute path of the destination folder.
    // Adding timestamp with image's name so that files with same name can be uploaded easily.
    $date = new DateTime();
    $newFileName = $date->getTimestamp().$_FILES['file']['name'];
    $targetFile =  $targetPath.$newFileName;  // Create the absolute path of the uploaded file destination.
    move_uploaded_file($tempFile,$targetFile); // Move uploaded file to destination.

    echo $newFileName;
}
?>

delete_temp_files.php 

<?php
$ds = DIRECTORY_SEPARATOR;  // Store directory separator (DIRECTORY_SEPARATOR) to a simple variable. This is just a personal preference as we hate to type long variable name.
$storeFolder = 'uploads'; 

$fileList = $_POST['fileList'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;


if(isset($fileList)){
    unlink($targetPath.$fileList);
}

?>

J'espère que cela sera utile pour télécharger des images en utilisant ajax et supprimer en utilisant ajax :)

J'ai trouvé à partir des références suivantes:

Dropzone.js- Comment supprimer des fichiers du serveur?Dropzone.js supprimer le bouton avec php

Ajoutez également le code suivant dans votre fichier dropzone.js après la ligne # 1110 pour empêcher l'utilisateur de télécharger des fichiers en double avec le même nom :)

Dropzone.prototype.addFile = function(file) {
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len; _i++) {
            if(this.files[_i].name === file.name && this.files[_i].size === file.size) {
                return false;
        }
    }
}

Lien de référence: https://www.bountysource.com/issues/2993843-dropzone-did-not-check-the-duplicate-file-on-addfile?utm_campaign=plugin&utm_content=tracker%2F283989&utm_medium=issues&utm_source=gith

23
Rajnikanth

Pour préfixer le nom de fichier avec un horodatage à chaque fois avant le téléchargement, vous avez deux options selon votre version de DropzoneJS.

Les nouvelles versions de DropzoneJS 5.1 + ont une fonction renameFile qui est utilisée comme suit:

    ...
    renameFile: function (file) {
        file.name = new Date().getTime() + '_' + file.name;
    }
    ...

Dans anciennes versions v4.3 - v5.1 cela se fait un peu différemment.

Dans cette version, il y a une option renameFilename, utilisée comme ceci:

Dropzone.autoDiscover = false;
$(document).ready(function () {
    $(".dropzone").dropzone({
        renameFilename: function (filename) {
            return new Date().getTime() + '_' + filename;
        }
    });
});

Bon codage, Kalasch

20
Kalaschni

Je viens d'utiliser le renommage de fichier php standard.

$targetFile =  $targetPath . $_FILES['file']['name']; //the original upload
$newfilename = "somename" . $variable . ".jpg"; //a new filename string

rename($targetFile , $new); //rename at the end of the function

Cela a bien fonctionné pour moi et était assez simple à mettre en œuvre. L'extension .jpg n'est probablement pas recommandée pour le code dur, mais dans mon scénario, je n'obtiens que les types de fichiers jpg.

0
sixstring