如何从Dropzone上传和删除文件.js - how to upload and delete files from dropzone.js

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

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

要删除缩略图，您必须启用addRemoveLinks： true，并在 dropzonejs 中使用"已删除文件"选项

已删除文件：每当从列表中删除文件时调用。您可以收听此内容，并根据需要从服务器中删除该文件。

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

它

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

除了上面的最佳答案 - 要删除空格并替换为破折号并转换为小写，请在 dropzone.js 文件中应用此 js：

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

到文件名处理 - 我编辑了dropzone.js文件和上面的 ajax 调用。这样，客户端处理文件命名，它会自动发送到 PHP/服务器端，所以你不必在那里重做它，而且它的 URL 几乎是安全的。

在某些情况下，js 会根据功能/命名而更改：

下车区.js - 293 行（大约）：

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

下车区.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> ）在 HTML 中，这将允许服务器端错误处理/删除也将消息发布回用户。

在 dropzone 中.php：

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

这只是我这边工作代码的扩展。我有 3 个文件，拖放区.html、拖放区.php、放置区.js

显然，您将创建一个 js 函数而不是重复代码，但由于命名更改，它适合我。您可以自己在 js 函数中传递变量来处理文件名空格/字符/等。