Question

我使用了下面的代码，图片已被删除但缩略图仍然显示。

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

Answer 1

要删除缩略图，您必须启用 addRemoveLinks：true，并使用dropzonejs中的“removedfile”选项

removedfile：每当从列表中删除文件时调用。如果需要，您可以收听此信息并从服务器中删除该文件。

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

我还为删除脚本添加了一个ajax调用，它看起来像这样：

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

它适用于我，所以我希望它有所帮助。

Answer 2

除了上面的最佳答案 - 删除空格并用短划线替换并转换为小写在dropzone.js文件中应用此js：

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

到文件名处理 - 我编辑了dropzone.js文件和上面的ajax调用。通过这种方式，客户端处理文件管理，并且它自动被发送到php /服务器端，所以你不必在那里重做它，它的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());
};

我将整个removedFile部分移到了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”＆gt;），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函数中传递变量来处理文件名空间/字符/等。

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

您可以从here

获取工作代码

如何从dropzone.js上传和删除文件

3 个答案: