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

关键词：

【中文标题】如何从 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 函数中传递变量来处理文件名空间/字符/等。

【讨论】：

重命名上传的文件，以便将其删除 DropZone.js

】重命名上传的文件，以便将其删除DropZone.js【英文标题】：RenameuploadedfilesoitcanberemovedDropZone.js【发布时间】：2015-02-2510:17:23【问题描述】：我决定更新这个问题，因为我仍然无法更改imageId这是我当前的dropzone实现$("div#UploadImage"... 查看详情

如何使用 dropzone.js 和 hapi.js 上传图片

】如何使用dropzone.js和hapi.js上传图片【英文标题】：Howtouploadanimageusingdropzone.jsandhapi.js【发布时间】：2018-06-0307:15:15【问题描述】：按照tutorial，我正在尝试将图像文件上传到我的hapi.js服务器。我遇到了这个错误：CORS错误：不允... 查看详情

仅当单击提交按钮时，如何让 Dropzone.js 上传文件？

】仅当单击提交按钮时，如何让Dropzone.js上传文件？【英文标题】：HowtogetDropzone.jstouploadfilesonlywhenasubmitbuttonisclicked?【发布时间】：2013-11-2212:33:34【问题描述】：在过去的几天里，我一直在尝试在我的表单中实现Dropzone，但到目... 查看详情

如何限制上传的 dropzone.js 文件的数量？

】如何限制上传的dropzone.js文件的数量？【英文标题】：Howtolimitthenumberofdropzone.jsfilesuploaded?【发布时间】：2013-08-0514:36:55【问题描述】：根据用例，如何限制dropzone.js允许的文件数量？例如，我可能只需要允许上传1、2或4个文件... 查看详情

如何使用 Dropzone.js 进行分块文件上传（仅限 PHP）？

】如何使用Dropzone.js进行分块文件上传（仅限PHP）？【英文标题】：HowdoyouuseDropzone.jswithchunkedfileuploads(PHPonly)?【发布时间】：2018-10-2801:13:45【问题描述】：我可以找到大量关于如何将分块文件上传与各种API和库一起使用的文档，... 查看详情

如何克服 Laravel dropzone 文件上传中的 getClientOriginalName() 错误？

】如何克服Laraveldropzone文件上传中的getClientOriginalName()错误？【英文标题】：HowtoovercomegetClientOriginalName()errorinLaraveldropzonefileupload?【发布时间】：2017-05-1415:20:10【问题描述】：我使用的是Laravel5.0，图片上传我使用的是dropzone.js。... 查看详情

dropzone.js 更改显示单位

】dropzone.js更改显示单位【英文标题】：dropzone.jsChangedisplayunits【发布时间】：2015-03-0521:02:07【问题描述】：有谁知道是否可以更改上传文件的单位显示？我上传了一个600MB的文件，显示为0.6Gib……这不是真正的用户友好。我查看... 查看详情

dropzone.js实现文件拖拽上传

dropzone.js是一个开源的JavaScript库，提供AJAX异步文件上传功能，支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果，不依赖jQuery库。查看演示下载源码使用Dropzone我们可以建立一个正式的上传form表单，并... 查看详情

如何限制 dropzone.js 中的最大“总”文件大小？

】如何限制dropzone.js中的最大“总”文件大小？【英文标题】：Howtolimitthemax"total"filesizeindropzone.js?【发布时间】：2015-09-1616:09:43【问题描述】：目前我使用dropzone来处理Jquery中的文件上传。到目前为止，它工作正常。唯一... 查看详情

在每个文件上传时使用 dropzone.js 发送自定义数据

】在每个文件上传时使用dropzone.js发送自定义数据【英文标题】：Sendcustomdatawithdropzone.jsoneachFileUpload【发布时间】：2015-05-1809:26:26【问题描述】：我在我的CodeIgniter项目中使用dropzone。每次拖动文件时，dropzone都会创建一个ajax请求... 查看详情

如何仅使 Dropzone.js 预览 Div 可点击而不是整个表单

】如何仅使Dropzone.js预览Div可点击而不是整个表单【英文标题】：HowtomakeonlytheDropzone.jsPreviewsDivclickableandnotthewholeform【发布时间】：2014-04-0613:13:12【问题描述】：我必须使用dropzone.js表单，它将一些输入和文件上传信息发送到另一... 查看详情

Django 和 Dropzone.js

】Django和Dropzone.js【英文标题】：DjangoandDropzone.js【发布时间】：2015-11-0403:45:09【问题描述】：当我使用dropzone上传文件时，它会将它们添加到数据库中，但它们没有文件，只有ID和创建日期。我认为观点是问题，但我已经尝试了... 查看详情

Dropzone.js 上传进度条不显示

】Dropzone.js上传进度条不显示【英文标题】：Dropzone.jsuploadprogressbarnotshowing【发布时间】：2014-05-2003:02:57【问题描述】：我正在使用Dropzone.js进行文件上传，它运行良好，只是没有出现进度条。没有错误。我在网站的前端使用Bootst... 查看详情

dropzone.js 图片上传接受的MimeTypes

】dropzone.js图片上传接受的MimeTypes【英文标题】：dropzone.jsimageuploadacceptedMimeTypes【发布时间】：2013-06-0509:51:28【问题描述】：我正在使用dropzone.js插件将图像上传器添加到我的应用程序。我知道这可能是一个非常基本的问题，所... 查看详情

上传 30 秒后，使用 PHP 上传 Dropzone.js 失败

】上传30秒后，使用PHP上传Dropzone.js失败【英文标题】：Dropzone.jsuploadwithPHPfailedafter30secondsupload【发布时间】：2018-03-0422:19:45【问题描述】：我正在尝试将“大”文件上传到我的应用程序。用户必须能够上传小于200MB的视频文件，... 查看详情

文件上传插件dropzone(代码片段)

1、相关下载下载dropzone.js文件：https://gitlab.com/meno/dropzone/-/jobs/79974233/artifacts/file/dist/dropzone.jsdropzone.css:f12取出样式并保存至static/css目录即可；2、前端样式加载<hr><p>已上传文件</p><ulstyle=" 查看详情

dropzone拖动文件上传在thinkphp5中应用一个实例

参考：Dropzone的使用方法点击查看dropzone中文文档后台用的INSPINIA框架的模板，里面有，dropzone.jsdropzone是一个可以拖文件上传的js.拖进去，就上传了。我在页面上，写了一个保存已经上传的文件的image3,image4.这就需要改写一下dropzo... 查看详情

在dropzone js上传目录中使每个挂载一个新文件夹

】在dropzonejs上传目录中使每个挂载一个新文件夹【英文标题】：makeeverymountanewfolderindropzonejsuploaddirectory【发布时间】：2019-04-0114:08:30【问题描述】：我在我的项目中使用dropzone.js来上传文章图片。例如所有文章图片都会上传到这... 查看详情