Dropzone.js - Vorhandene Dateien auf dem Server anzeigen

Question

Ich benutze derzeit Dropzone.js v3.10.2 Ich habe Probleme, die meine vorhandenen Dateien anzeigen, die ich bereits hochgeladen habe.Ich bin mit PHP mehr als kompetent, aber ich habe ein begrenztes Wissen, wenn es um Ajax und JS

geht

Wenn Sie helfen könnten, das wäre fantastisch

Vielen Dank im Voraus

index.php

generasacodicetagpre.

hochladen.php

generasacodicetagpre.

ps.Ich weiß, dass der PHP die Daten abgerufen hat

Vielen Dank im Voraus

damian

Answer 1

Ich habe den Code überprüft (vom Startsutorial) und es hat auch nicht für mich gearbeitet (?)

Ich habe es gelang, es zu arbeiten, indem er ersetzt:

generasacodicetagpre.

mit diesem:

generasacodicetagpre.

Gutschrift an diese Antwort: https://stackoverflow.com/a/5531883/984975

edit: In Version 4.0 werden die Miniaturansichten der vorhandenen Dateien mit der Cue-Bar darin angezeigt.So lösen Sie dieses Hinzufügen:

generasacodicetagpre.

Answer 2

für Dropzone 5.x

Die bisher angegebenen Lösungen funktionierten nicht mit Dropzone-Version 5.x . Was für mich funktionierte, war, Dropzone-Konfigurationsoptionen wie folgt zu ändern:

generasacodicetagpre.

Das Konzept ist, um eine Mock-Datei zu erstellen, und rufen Sie die Ereignishandler CODECODICETICETAGCODECODECODECODECODECODECODECODE an, um die Vorschau zu zeichnen.Und dann rufen Sie anschließend auf addedfile ein, um sicherzustellen, dass keine Fortschrittsbalken usw. angezeigt werden.

Referenz

Answer 3

This is the way which I implemented it. I have used createThumbnailFromUrl rather using emitting a thumbnail event.

HTML element;

<form id="sample-img" action="/upload" class="dropzone">
    <div class="dz-default dz-message"></div>
</form>

JS code;

previewThumbailFromUrl({
    selector: 'sample-img',
    fileName: 'sampleImg',
    imageURL: '/images/sample.png'
});

function previewThumbailFromUrl(opts) {
    var imgDropzone = Dropzone.forElement("#" + opts.selector);
    var mockFile = {
        name: opts.fileName,
        size: 12345,
        accepted: true,
        kind: 'image'
    };
    imgDropzone.emit("addedfile", mockFile);
    imgDropzone.files.push(mockFile);
    imgDropzone.createThumbnailFromUrl(mockFile, opts.imageURL, function() {
        imgDropzone.emit("complete", mockFile);
    });
}

Answer 4

I was having trouble with maxFiles/maxfilesexceeded and take some while looking for a anwser and then I found this links below:

https://www.bountysource.com/issues/1444854-use-files-already-stored-on-server-wiki-example-incomplete?utm_campaign=plugin&utm_content=tracker%2F283989&utm_medium=issues&utm_source=github

$.each(obj, function(i, item) {

  ///faking the BytesSent its not essanail to me.. if you need it just pass the correct one
  var upload = {bytesSent: 12345};

  /// again fake the size..
  var mockFile = {name: item.name, size: 12345, accepted: true};

  mockFile.upload = upload;
  mockFile.kind = "file";
  Dropzone.forElement("#editfileuploader").emit("addedfile", mockFile);

  //push the file to files array because getAcceptedFiles using this array length to get the currct files count..
  Dropzone.forElement("#editfileuploader").files.push(mockFile);

  //this for lettig dropzone to creat the thumbnail(item.ts has the file location)
  Dropzone.forElement("#editfileuploader").emit("thumbnail", mockFile, item.ts);

  //to show the success mark and to return image id response
  Dropzone.forElement("#editfileuploader").emit("success", mockFile, item.id);
});