如何删除或更新已经通过Dropzone.js在服务器上上传的文件 [英] How to delete or update files already uploaded on the server via Dropzone.js

问题描述

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

I have announcement object that can contain multiple images. I managed to create the form for uploading files via dropzone. Now I want to give access to the author of the announcement to edit it, which means to edit the images as well. To edit the images means to re-order them, to remove some of them (or all of them) or to add more.

我想要做的是加载公告对象并将图像添加到dropzone对象，以便当用户单击提交按钮时，所有图像将沿着休息公告的数据。换句话说，将图像排队到dropzone并再次提交。通过这种方式，在服务器端，我可以看到哪些文件是新文件，哪些文件丢失，顺序如何等。

What I wanted to do is to load the announcement object and add the images to the dropzone object so that when the user clicks the submit button all images to be sent along the rest announcement's data. In other words to enqueue the images to dropzone and to submit them again. This way on server side I can see which files are new, which are missing, what the order is etc.

到目前为止，我所做的事情：

What I did so far:

• 我看到了如何通过 dropzone的常见问题解答，我成功地显示了它们。这段代码非常适合我：

• I saw how to display already uploaded files from the server via the FAQ of dropzone and I was successfully able to display them. This code worked perfectly for me:

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

好，但是通过这种方式我看不到他们入队。

Ok, but this way I saw I am not able to enqueue them.

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

Then, I had a look at the dropzone's code and I saw one very useful method addFile(file);. This method actually does all the things that the above code does - pushes the file to the dropzone.files array, emits the addedfile event, adds it to the thumbnail queue, validates the file and if everything is ok, enqueues the file. So my code now looks like this:

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

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

With this code correction, I managed to enqueue the file. The problem is, when I try to send the data to the server, I've got the following error:

TypeError：FormData.append的参数2没有实现接口Blob

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

我看到了answer ，但这似乎是一个我需要做的简单操作对我来说是一个非常复杂的解决方法。

I saw an answer on stackoverflow about this, but this seems to be a very complicated workaround to me for the simple operation I need to do.

还有其他更简单的解决方案吗？您如何编辑上传到服务器的图像？您将如何对图像重新排序，或将图像添加到队列中或从队列中删除图像？

预先感谢！

推荐答案

我自己做到了。我正在使用PHP，所以我将用PHP术语进行解释。

I managed to do it myself. I am using PHP, so I will explain it in PHP terms.

客户端：基本上，我会检查自己是否处于更新或创建模式。如果我处于更新模式，则会加载现有图片，并按照 dropzone的常见问题解答。

CLIENT: Basically I check whether I am in update or create mode. If I am in update mode, I load the existing pictures and show them to the user exactly as described in the dropzone's FAQ.

我还保留了一个名为 order 的数组，其中包含所有图像。当对图像执行完操作时，我总是更新此数组-添加一个新数组，删除，重新排序。我处于更新还是创建模式都没关系。提交表单时，我也会发送此数组。

I also keep an array called order with all the images. I update this array always when an action to the images is done - adding a new one, deleting, re-ordering. It doesn't matter whether I am in update or create mode. When I submit the form, I send this array as well.

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

The only difference is that if I have new images added, I call dropzone.processQueue() else I call $.post(). In both cases I am senging the order array along with the other form data.

服务器：如果添加了新图像，我将从 $ _ FILES 数组中获取它们。无论如何，我都是从 order 发布参数中获取订单的。

SERVER: If new images are added, I get them from the $_FILES array. In any case I get the order from the order post param.

我不会使用希望它将对将来的任何人有帮助。如有任何疑问，请询问。

I won't delete this question with the hope it will help anyone in the future. If any questions, please ask.

这篇关于如何删除或更新已经通过Dropzone.js在服务器上上传的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！