Как загрузить и удалить файлы из dropzone.js

Ответ 1

Для удаления эскизов вам необходимо включить addRemoveLinks: true, и использовать опцию "removefile" в dropzonejs

removefile: Вызывается всякий раз, когда файл удаляется из списка. Вы можете прослушать это и удалить файл с вашего сервера, если хотите.

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

Я также добавил ajax-вызов для удаления script и выглядит следующим образом:

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

Он работает на моей стороне, поэтому я надеюсь, что это поможет.

Ответ 2

в дополнение к лучшему ответу выше - удалить пробелы и заменить тире и преобразовать в нижний регистр, примените этот js в файле dropzone.js:

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

для обработки имени файла - я отредактировал файл dropzone.js И вышеупомянутый вызов ajax. Таким образом, клиент обрабатывает имена файлов, и он автоматически отправляется на сторону php/server, поэтому вам не придется переделывать его там, и его URL-адрес безопасен в значительной степени.

В некоторых случаях js изменился в зависимости от функции/именования:

dropzone.js - строка 293 (приблизительная):

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

dropzone.js - строка 746 (приблизительная):

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

Я переместил весь раздел removeFile на вершину dropzone.js следующим образом:

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

Примечание. Я также добавил в поле сообщения в html: (div id = "msg" > ) в html, который позволит обрабатывать/удалять ошибки на стороне сервера, чтобы отправить сообщение обратно пользователю.

в dropzone.php:

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

Это только расширение с рабочим кодом на моей стороне. У меня есть 3 файла, dropzone.html/dropzone.php/dropzone.js

Очевидно, вы создали бы функцию js вместо того, чтобы повторять код, но так как изменения именования меня устраивают. Вы можете просто передать переменные в js-функции самостоятельно, чтобы обрабатывать пространства имен файлов/символы/etc.

Ответ 3

Да, вы можете легко удалить файл из базы данных, а также из папки сервера. Я сделал это, написав функцию и вызвав delete.php и передав fid в качестве параметра:

function deletefile(value)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 alert(xmlhttp.responseText);
    }
  }
xmlhttp.open("GET","delete.php?fid="+value,true);
xmlhttp.send();
}

установите fid следующим образом

file.fid=responseText;  

Вы можете получить рабочий код здесь