Dropzone.js-как удалить файлы с сервера?

Я использую dropzone.js. Когда я пытаюсь удалить файлы, удаляются только эскизы, но не файлы с сервера. Я пробовал некоторые способы, но он просто дает мне имя изображения, которое было на стороне клиента, а не имя на стороне сервера(оба имени разные, сохраняя имена в зашифрованном виде).

любая помощь была бы очень признательна..

9
dropzone.js javascript jquery

9 ответов

то, как я справляюсь с этим, после того, как каждый файл загружен и сохранен на сервере, я эхом возвращаю имя, которое я даю файлу на моем сервере, и сохраняю его в объекте JS, что-то вроде этого:

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

С этим вы можете написать сценарий удаления в PHP, который принимает "serverFileName" и делает фактическое удаление, например:

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

другой путь,

Get response С сервера JSON формат или простая строка (тогда используйте только response вместо response.path),

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

здесь сервер может вернуть json, как это,

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

Итак, мы храним это path на span что мы можем получить доступ, когда мы собираемся удалить.

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

после завершения процесса шаблон предварительного просмотра будет удален Dropzone вместе с путем файла, хранящимся в span.

14

самый простой способ

JS файл, этот скрипт будет работать при нажатии кнопки Удалить

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

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


});

файл php "удалить.на PHP"

<?php
$t= $_POST['name'];
echo $t;
unlink($t); 
?>
6
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

файл будет удален при нажатии кнопки" Удалить":

поместите это в JS-файл или HTML-файл (или файл представления/действия PHP):

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

..и поместите этот код в свой PHP-файл:

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

надеюсь, это поможет вам бро :)

2

Я сделал проще, просто добавил новое свойство serverFileName объекту file:

    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

в моем случае сервер отправляет ответ ajax с deleteUrl для каждого конкретного изображения. Я просто вставляю этот url как атрибут "data-dz-remove", уже установленный в previewTemplate.

Как я использую jquery это выглядит так:

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

позже этот attr использовал для отправки сообщения ajax с этим url-адресом для удаления файла на сервере с помощью события removedfile, как указано выше.

0

Это простое решение будет работать для загрузки отдельных файлов, нет необходимости в манипуляции DOM.

PHP загрузить скрипт

  [...]
  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 за пределами Dropzone

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

когда вы сохраняете изображение в загрузке оттуда, вы должны вернуть новое имя файла:

echo json_encode (array ("Filename" = > "новое имя файла"));

и в dropzone.файл js:

успех: функция(файл,ответ) {

    obj = JSON.parse(response);

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

и когда Dropzone инициализируется..

init: function () {

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


    });

    return noop;
  },

теперь вы получите новый файл изображения и вы можете удалить его с сервера

0