it-swarm.com.de

Dropzone.js- Wie lösche ich Dateien vom Server?

Ich benutze dropzone.js. Wenn ich versuche, Dateien zu löschen, werden nur die Miniaturansichten gelöscht, nicht jedoch die Dateien vom Server. Ich habe einige Möglichkeiten ausprobiert, aber es gibt mir nur den Namen des Bildes, das auf der Clientseite war, und nicht den Namen auf der Serverseite (beide Namen sind unterschiedlich und speichern Namen in verschlüsselter Form).

Jede Hilfe wäre sehr dankbar ..

9
Grish

Wie ich damit umgehe, ist, nachdem jede Datei hochgeladen und auf dem Server gespeichert wurde, ich den Namen wiederhole, den ich der Datei auf meinem Server gebe, und diese in einem JS-Objekt speichern, etwa wie folgt:

PHP:

move_uploaded_file($_FILES['file']['tmp_name'], $newFileName);
echo $newFileName;

JS:

dropZone.on("success", function(file, serverFileName) {
  fileList[serverFileName] = {"serverFileName" : serverFileName, "fileName" : file.name };
});

Damit können Sie dann in PHP ein Löschskript schreiben, das den "serverFileName" aufnimmt und den eigentlichen Löschvorgang ausführt, beispielsweise:

JS:

$.ajax({
    url: "upload/delete_temp_files.php",
    type: "POST",
    data: { "fileList" : JSON.stringify(fileList) }
});

PHP:

$fileList = json_decode($_POST['fileList']);

for($i = 0; $i < sizeof($fileList); $i++)
{
    unlink(basename($fileList[$i]));
}
15
FunkeDope

Ein anderer Weg,

Holen Sie sich responsevon Ihrem Server im JSONname__-Format oder eine einfache Zeichenfolge (verwenden Sie nur responseanstelle von response.path).

dropzone.on("success", function(file, response) {
  $(file.previewTemplate).append('<span class="server_file">'+response.path+'</span>');
});

Hier kann der Server einen Json wie folgt zurückgeben.

{
    status: 200,
    path: "/home/user/anything.txt"
}

Wir speichern diesen pathin einem spanname__, auf den wir zugreifen können, wenn wir ihn löschen.

dropzone.on("removedfile", function(file) {
  var server_file = $(file.previewTemplate).children('.server_file').text();
  alert(server_file);
  // Do a post request and pass this path and use server-side language to delete the file
  $.post("delete.php", { file_to_be_deleted: server_file } );
});

Nach dem Vorgang wird die Vorschau-Vorlage von Dropzonezusammen mit dem Dateipfad in spangelöscht.

15
Harsh Vakharia

Der einfachste Weg

JS-Datei, dieses Skript wird ausgeführt, wenn Sie auf die Schaltfläche "Löschen" klicken

this.on("removedfile", function(file) {
alert(file.name);

$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'name': file.name}
});


});

pHP-Datei "delete.php"

<?php
$t= $_POST['name'];
echo $t;
unlink($t); 
?>
6
yogesh singh

Die Datei wird gelöscht, wenn Sie auf die Schaltfläche "Entfernen" klicken:

Fügen Sie dies Ihrer JS-Datei oder Ihrer HTML-Datei (oder Ihrer PHP View/Action-Datei) hinzu:

<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = { 
// Change following configuration below as you need there bro
autoProcessQueue: true,
uploadMultiple: true,
parallelUploads: 2,
maxFiles: 10,
maxFilesize: 5,
addRemoveLinks: true,
dictRemoveFile: "Remove",
dictDefaultMessage: "<h3 class='sbold'>Drop files here or click to upload document(s)<h3>",
acceptedFiles: ".xls,.xlsx,.doc,.docx",
//another of your configurations..and so on...and so on...
init: function() {
     this.on("removedfile", function(file) {
          alert("Delete this file?");
          $.ajax({
               url: '/delete.php?filetodelete='+file.name,
               type: "POST",
               data: { 'filetodelete': file.name}
          });
     });
}}
</script>

..und Fügen Sie diesen Code in Ihre PHP -Datei ein:

<?php
     $toDelete= $_POST['filetodelete'];
     unlink("{$_SERVER['DOCUMENT_ROOT']}/*this-is-the-folder-which-you-put-the-file-uploaded*/{$toDelete}");
     die;
?>

Hoffe, das hilft dir zu bremsen :)

2
Raymond
success: function(file, serverFileName)
        {
            fileList['serverFileName'] = {"serverFileName" : serverFileName, "fileName" : file.name };

            alert(file.name);
            alert(serverFileName);
        },
        removedfile: function(file, serverFileName)
        {
            fileList['serverFileName'] = {"serverFileName" : serverFileName, "fileName" : file.name };

            alert(file.name);
            alert(serverFileName);
        }
2
Karthiga

Sie können die ID-Nummer der hochgeladenen Datei zur mockFile hinzufügen und diese ID zum Löschen vom Server verwenden.

  Dropzone.options.frmFilesDropzone = {
  init: function() {
    var _this = this;  

    this.on("removedfile", function(file) {
        console.log(file.id); // use file.id to delete file on the server
    });        
    $.ajax({
        type: "GET",
        url: "/server/images",
        success: function(response) {
            if(response.status=="ok"){
                $.each(response.data, function(key,value) {
                    var mockFile = {id:value.id,name: value.name, size: value.filesize};
                    _this.options.addedfile.call(_this, mockFile);
                    _this.options.thumbnail.call(_this, mockFile, "/media/images/"+value.name);
                    _this.options.complete.call(_this, mockFile);
                    _this.options.success.call(_this, mockFile);
                });
            }           
        }
    });

Server Json-Rückgabe für das Abrufen aller bereits hochgeladenen Bilder/server/images:

{
"data":[
    {"id":52,"name":"image_1.jpg","filesize":1234},
    {"id":53,"name":"image_2.jpg","filesize":1234},
]}
1
Dards

Ich habe es einfacher gemacht, nur die neue Eigenschaft serverFileName zum Dateiobjekt hinzugefügt: 

    success: function(file, response) {
        file.serverFileName = response.file_name;
    },
    removedfile: function (file, data) {
        $.ajax({
            type:'POST',
            url:'/deleteFile',
            data : {"file_name" : file.serverFileName},
            success : function (data) {
            }
        });
    }
1
Supervision

Diese einfache Lösung funktioniert für das Hochladen einzelner Dateien, es ist keine DOM-Manipulation erforderlich.

PHP Skript hochladen

  [...]
  echo $filepath; // ie: 'medias/articles/m/y/a/my_article/my-image.png'

JS Dropzones

  this.on("success", function(file, response) {
        file.path = response; // We create a new 'path' index
  });
  this.on("removedfile", function(file) {
        removeFile(file.path)
  });

JS außerhalb von Dropzone

var removeFile = function(path){
   //SEND PATH IN AJAX TO PHP DELETE SCRIPT
    $.ajax({
        url: "uploads/delete.php",
        type: "POST",
        data: { 'path': path}
    });
}
0
Tom Toms

Wenn Sie das Bild von dort aus in Upload speichern, müssen Sie einen neuen Dateinamen zurückgeben:

echo json_encode (array ("Dateiname" => "Neuer Dateiname"));

Und in der dropzone.js-Datei:

erfolg: Funktion (Datei, Antwort) {

    obj = JSON.parse(response);

    file.previewElement.id = obj.Filename;
    if (file.previewElement) {
      return file.previewElement.classList.add("dz-success");
    }
  },

Und wenn die Dropzone initialisiert wird ..

init: function () {

    this.on("removedfile", function(file) {
      var name = file.previewElement.id;
        $.ajax({
        url: "post URL",
        type: "POST",
        data: { 'name': name}
        });


    });

    return noop;
  },

Nun erhalten Sie eine neue Bilddatei, die Sie vom Server löschen können

0
Hardik Deliwala

In meinem Fall sendet der Server eine Ajax-Antwort mit deleteUrl für jedes spezifische Bild zurück. Ich füge diese URL einfach als 'data-dz-remove'-Attribut ein, das bereits in previewTemplate gesetzt ist.

Wenn ich jquery verwende, sieht es so aus:

this.on("success", function (file, response) {
    $(file.previewTemplate).find('a.dz-remove').attr('data-dz-remove', response.deleteUrl);
});

Später wurde dieses attr verwendet, um einen Ajax-Beitrag mit dieser URL zu senden, um die Datei auf dem Server durch das Ereignis removefile wie oben erwähnt zu löschen.

0
aiho