jquery - remove - Dropzone.js-Cómo cambiar el nombre del archivo antes de subirlo a la carpeta

dropzone remove file

Question

Estoy usando el script DropzoneJS para cargar imágenes con arrastrar y soltar, pero ahora estoy buscando una solución para agregar marcas de tiempo actuales con el nombre del archivo antes de cargarlas en la carpeta del servidor, porque no puedo cargar la misma imagen si El archivo ya existe en la carpeta.

También me he referido a continuación en el enlace stackoverflow, pero estoy confundido sobre dónde implementar esto.

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

Aquí está el script dropzone.js para referencia

Answer 1

Acabo de usar el archivo php estándar renombrar.

$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

Esto funcionó bien para mí y fue bastante simple de implementar. La extensión .jpg probablemente no se recomienda para código duro, pero en mi escenario solo obtengo tipos de archivos jpg.

Answer 2

Para prefijar el nombre de archivo con una marca de tiempo cada vez que se cargue, tiene dos opciones dependiendo de su versión de DropzoneJS.

Las versiones más recientes de DropzoneJS 5.1+ tienen una función renameFile que se usa de la siguiente manera:

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

En versiones anteriores v4.3 - v5.1 esto se hace un poco diferente.

En estas versiones hay una opción renameFilename , esto se usa así:

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

Feliz codificación, Kalasch

Answer 3

Por favor revise el siguiente código que he implementado usando PHP.

Use el siguiente código en su archivo de índice

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

?>

Espero que esto sea útil para cargar imágenes usando ajax y eliminar usando ajax :)

Lo he encontrado a partir de las siguientes referencias:

Dropzone.js- ¿Cómo borrar archivos del servidor? Dropzone.js eliminar botón con php

También agregue el siguiente código en su archivo dropzone.js después de la línea # 1110 para evitar que el usuario cargue archivos duplicados con el mismo nombre :)

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

Enlace de referencia: 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=github