如何使用Dropzone.js上传和删除文件

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

- Aaru

---

你可能需要提供一些实际的代码，以便让人们帮助你！ - tlenss

你是怎么实现服务器端代码的？Dropzone只是客户端。看一下你的服务器端代码会很有用。 - tomca32

如何删除已删除图像的缩略图？ - Aaru

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

在我的端上它有效，所以我希望它能够帮到你。

- 6opko

---

谢谢您发布这个！我已经调试了一段时间 - 这个返回语句对我有用。 - Alan Illing

如何填写 add_your_filename_here？当用户点击“删除文件”按钮时，如何传递文件名？ - Raptor

@6opko，有没有办法从dropzone获取已删除文件的索引？这是可能的吗？ - MegaBytes

@Leonardo：我认为你可以在上传后返回id，然后在file.xhr.response中获取它。 - CôteViande

感谢 @6opko，你真是一个救星！ - Juan Pablo Ugas

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"></div>，它将允许服务器端错误处理/删除向用户发送消息。

在dropzone.php文件中：

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

这只是我这边工作代码的扩展。我有三个文件：dropzone.html、dropzone.php、dropzone.js

显然，你应该创建一个js函数而不是重复代码，但因为命名更改，这对我很合适。你可以自己在js函数中传递变量来处理文件名空格/字符等。

- Fstarocka Burns