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

Posted 2023-02-24

【中文标题】如何从 dropzone.js 上传和删除文件

【英文标题】：how to upload and delete files from dropzone.js

【发布时间】：2013-10-22 21:54:52

【问题描述】：

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

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

【问题讨论】：

您可能想提供一些实际代码供人们帮助您！

那么，您是如何实现服务器代码的？ Dropzone 只是客户端。查看您的服务器代码会很有用。

如何去掉被删除图片的缩略图？

【参考方案1】：

要删除缩略图，您必须启用 addRemoveLinks：真， 并在 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;        
              

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

【讨论】：

感谢您发布此信息！调试了一段时间——这个返回语句对我有用

add_your_filename_here怎么填写？用户点击“删除文件”按钮时如何传递文件名？

@6opko，有没有办法从 dropzone 中获取已删除文件的索引？能买到吗？

@Leonardo：我觉得可以上传后返回id，然后在file.xhr.response中获取。

谢谢@6opko，你是一个理智的保护者！

【参考方案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>) 在 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 函数中传递变量来处理文件名空间/字符/等。