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

时间:2016-02-19 07:25:54

标签: dropzone.js

我有可以包含多个图像的公告对象。我设法创建了通过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:FormData.append的参数2未实现接口Blob

我在stackoverflow上看到了answer关于此问题,但对于我需要做的简单操作,这似乎是一个非常复杂的解决方法。

为此目的还有其他更简单的解决方案吗?如何编辑上传到服务器的图像?您将如何重新排序图像,或向队列中添加/删除图像?

提前致谢!

1 个答案:

答案 0 :(得分:0)

我自己设法做到了。我正在使用PHP,因此我将用PHP术语解释它。

客户端:基本上我会检查我是处于更新模式还是创建模式。如果我处于更新模式,我会加载现有图片并完全按照dropzone's FAQ中的说明向用户显示。

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

唯一不同的是,如果我添加了新图片,我会拨打dropzone.processQueue(),我会拨打$.post()。在这两种情况下,我都会将order数组与其他表单数据一起进行干预。

SERVER:如果添加了新图片,我会从$_FILES数组中获取它们。无论如何,我从order post param。

获得订单

我不会删除这个问题,希望它能帮助将来的任何人。如有任何问题,请询问。