web-dev-qa-db-de.com

wie man Dateien aus dropzone.js hochlädt und löscht

Ich habe den folgenden Code verwendet, bei dem das Bild gelöscht wurde, das Miniaturbild jedoch weiterhin angezeigt wird.

 Dropzone.options.myDropzone = {
  init: function() {
    this.on("success", function(file, response) {
      file.serverId = response; 

    });
    this.on("removedfile", function(file) {
      if (!file.serverId) { return; }
      $.post("delete-file.php?id=" + file.serverId); 
    });
  }
javascriptphpjquerydropzone.js
48
Aaru

Um Miniaturen zu löschen, müssen Sie AddRemoveLinks: true, Aktivieren und die Option "removefile" in dropzonejs verwenden

removefile: Wird aufgerufen, wenn eine Datei aus der Liste entfernt wird. Sie können sich das anhören und die Datei von Ihrem Server löschen, wenn Sie möchten.

addRemoveLinks: true,
removedfile: function(file) {
    var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
  }

Ich habe auch einen Ajax-Aufruf für das Delete-Skript hinzugefügt und es sieht so aus:

addRemoveLinks: true,
removedfile: function(file) {
    var name = file.name;        
    $.ajax({
        type: 'POST',
        url: 'delete.php',
        data: "id="+name,
        dataType: 'html'
    });
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;        
              }

Es funktioniert auf meiner Seite, also hoffe ich, dass es hilft.

86
6opko

neben der besten Antwort oben - um Leerzeichen zu entfernen und durch Bindestriche zu ersetzen und in Kleinbuchstaben zu konvertieren, wenden Sie diese js in der dropzone.js-Datei an:

name=name.replace(/\s+/g, '-').toLowerCase();

zur Behandlung der Dateinamen - Ich habe die dropzone.js-Datei UND den obigen Ajax-Aufruf bearbeitet. Auf diese Weise behandelt der Client das Filenamen und es wird automatisch an die PHP/Server-Seite gesendet, so dass Sie es dort nicht wiederholen müssen und seine URL ziemlich sicher ist.

In einigen Fällen haben sich die js je nach Funktion/Benennung geändert:

dropzone.js - Zeile 293 (ungefähr):

node = _ref[_i];
node.textContent = this._renameFilename(file.name.replace(/\s+/g, '-').toLowerCase());

dropzone.js - Zeile 746 (ungefähr):

Dropzone.prototype._renameFilename = function(name) {
   if (typeof this.options.renameFilename !== "function") {
   return name.replace(/\s+/g, '-').toLowerCase();
   }
   return this.options.renameFilename(name.replace(/\s+/g, '-').toLowerCase());
};

Ich habe den gesamten removeFile-Bereich wie folgt nach oben in dropzone.js verschoben:

 autoQueue: true,
  addRemoveLinks: true,

  removedfile: function(file) {

     var name = file.name;    
     name =name.replace(/\s+/g, '-').toLowerCase();    /*only spaces*/
      $.ajax({
          type: 'POST',
          url: 'dropzone.php',
          data: "id="+name,
          dataType: 'html',
          success: function(data) {
                    $("#msg").html(data);

            }
      });


    var _ref;
    if (file.previewElement) {
      if ((_ref = file.previewElement) != null) {
        _ref.parentNode.removeChild(file.previewElement);
      }
    }
    return this._updateMaxFilesReachedClass();
  },
  previewsContainer: null,
  hiddenInputContainer: "body",

Hinweis: Ich habe auch ein Meldungsfeld in der HTML-Datei hinzugefügt: (div id = "msg">) in der HTML-Datei, das es dem serverseitigen Fehlerhandling/-löschungsverfahren ermöglicht, eine Nachricht an den Benutzer zurückzuschicken.

in dropzone.php:

if(isset($_POST['id']){
//delete/unlink file 
echo $_POST['id'].' deleted'; // send msg back to user
}

Dies ist nur eine Erweiterung mit Arbeitscode auf meiner Seite. Ich habe 3 Dateien, dropzone.html/dropzone.php/dropzone.js

Offensichtlich würden Sie eine js-Funktion erstellen, anstatt den Code zu wiederholen, aber da sich die Benennung geändert hat, passte das zu mir. Sie können die Variablen in einer js-Funktion einfach selbst übergeben, um Dateinamen/Zeichen/usw. zu behandeln.

0
Fstarocka Burns