如何通过 Dropzone.js 删除或更新已上传到服务器的文件

Question

我有一个可以包含多个图像的公告对象。我设法创建了通过 dropzone 上传文件的表单。现在我想授予公告作者编辑权限，这意味着也可以编辑图像。编辑图像意味着重新排序它们，删除其中的一些（或全部）或添加更多。

我想做的是加载公告对象并将图像添加到 dropzone 对象，这样当用户单击提交按钮时，所有图像都会与其余公告数据一起发送。换句话说，将图像排入 dropzone 并再次提交。这样在服务器端我可以看到哪些文件是新的，哪些是丢失的，顺序是什么等。

到目前为止我做了什么：

• 我看到了如何通过 FAQ of dropzone 显示已从服务器上传的文件，并且我能够成功显示它们。这段代码非常适合我：

  var mockFile = { name: "Filename", size: 12345 };
  myDropzone.emit("addedfile", mockFile);
  myDropzone.emit("thumbnail", mockFile, "/image/url");
  myDropzone.createThumbnailFromUrl(file, imageUrl);
  

  好的，但是我看到我无法将它们排入队列。

• 然后，我看了一下dropzone的代码，发现一个非常有用的方法addFile(file);。这个方法实际上完成了上面代码所做的所有事情 - 将文件推送到 dropzone.files 数组，发出 addedfile 事件，将其添加到缩略图队列，验证文件，如果一切正常，则将文件排入队列。所以我的代码现在看起来像这样：

  var mockFile = { name: "Filename", size: 12345, type: "jpg" }; // The type is required by the _enqueueThumbnail() method
  myDropzone.addFile(mockFile);
  myDropzone.createThumbnailFromUrl(file, imageUrl);
  

  通过此代码更正，我成功地将文件加入队列。问题是，当我尝试将数据发送到服务器时，出现以下错误：

TypeError: Argument 2 of FormData.append does not implement interface Blob

我在 Whosebug 上看到了一个关于此的 ，但这对我来说似乎是一个非常复杂的解决方法，因为我需要执行简单的操作。

有没有其他更简单的解决方案？如何编辑上传到服务器的图像？你会怎么做来重新排序图像，或者 add/delete 图像 to/from 队列？

提前致谢！

Answer 1

我自己设法做到了。我用的是PHP，所以我会用PHP来解释。

CLIENT: 基本上我会检查我是处于更新模式还是创建模式。如果我处于更新模式，我会加载现有图片并将它们完全按照 dropzone's FAQ 中的描述显示给用户。

我还保留了一个名为 order 的数组，其中包含所有图像。当对图像的操作完成时，我总是更新这个数组——添加一个新的、删除、重新排序。我处于更新模式还是创建模式并不重要。当我提交表单时，我也会发送这个数组。

唯一的区别是，如果我添加了新图像，我会调用 dropzone.processQueue()，否则我会调用 $.post()。在这两种情况下，我都将 order 数组与其他表单数据一起发送。

SERVER: 如果添加了新图像，我会从 $_FILES 数组中获取它们。无论如何，我从 order post 参数中得到订单。

我不会删除这个问题，希望它能对以后的任何人有所帮助。有问题请追问。