¿Cómo precargo imágenes en dropzone.js?

Solución:

La forma correcta de hacerlo es usar el método .emit proporcionado por dropzone js para agregar un archivo y una miniatura para precargar imágenes desde el servidor. Vea el código de muestra a continuación. Tomado de https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");

El método .emit de dropzone activará la función init y si tiene alguna devolución de llamada de evento de archivo añadido escrita para ella. Por ejemplo, estoy usando el botón agregar eliminar evento de archivo agregado y también adjuntar la funcionalidad de eliminación de imagen.

Dropzone es tan fuerte e impresionante que puedes hacer cualquier cosa al respecto.
Pasos a seguir ->

1) En primer lugar, tendrá que crear un script del lado del servidor que obtendrá todos los nombres de archivo y su tamaño y lo enviará como respuesta json.
Código PHP:

  foreach($myitemfiles as $file){ //get an array which has the names of all the files and loop through it 
        $obj['name'] = $file; //get the filename in array
        $obj['size'] = filesize("uploadsfolder/".$file); //get the flesize in array
        $result[] = $obj; // copy it to another array
      }
       header('Content-Type: application/json');
       echo json_encode($result); // now you have a json response which you can use in client side 

2) Ahora puede usar la respuesta para mostrar los archivos cargados. Escriba el siguiente código dentro de la función de inicio de dropzone
Código Javascript:

  init: function() {

      var thisDropzone = this;

        $.getJSON('get_item_images.php', function(data) { // get the json response

            $.each(data, function(key,value){ //loop through it

                var mockFile = { name: value.name, size: value.size }; // here we get the file name and size as response 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploadsfolder/"+value.name);//uploadsfolder is the folder where you have all those uploaded files

            });

        });
}

Nota : no tome la ruta completa de la URL del archivo en el nombre del archivo, solo tome el nombre del archivo en sí, eso es todo.

Esto funciona

---

---

Utiliza Nuestro Buscador