Dropzone.js-多个文件上传,没有重复的响应

时间:2019-03-04 02:55:47

标签: dropzone.js

TLDR;

一夜安眠后,我设法简化了我的问题。这是更简单的问题。

我想将N个文件上传到服务器,该文件将一起处理并返回一个响应(例如,所有文件中的foobar总数加起来为XYZ)。

将此单个回复发送回客户端的最佳方法是什么?

谢谢。

下面是旧问题,对我来说是一个教训。


我正在使用Dropzone.js在我的应用程序中构建D&D功能。

请注意:我知道已经有几个问题在讨论多文件上传。但是它们与我的问题不同。他们讨论了如何获得单个回调而不是多个回调。

我的问题与以下情况有关:我将多个文件拖放到放置区,但是看到单个服务器响应被重复多次。这是我的配置:

Dropzone.options.inner = {
    init: function() {
      this.on("dragenter", function(e) {
        $('#inner').addClass('drag-over');
        //// TODO - find out WTF this isn't working (low priority)
      }),

      this.on("completemultiple", function(file, resp) {
        //// TODO
      })
    },

    url: "php/...upload...php",

    timeout: 120000, // 2m
    uploadMultiple: true,
    autoProcessQueue: false,
    clickable: false,
  };

  //// ... Some other stuff 
  //// ...

  $(document).ready(function() {
    $('#inner').click(function() {
      Dropzone.forElement('.dropzone').processQueue();
    });

在一开始,我拦截了“ complete”事件,而不是“ completemultiple”事件。即使服务器端php仅被调用一次,这也会导致其处理程序被多次调用(每个文件一次)。每次调用都返回同一服务器端消息的重复副本。

我不想要那个,所以我将其更改为“ completemultiple”,现在我可以确认处理程序仅通过文件数组被调用一次,但是单个服务器响应现在埋在返回的每个文件对象中-每个人都有完全相同的回复的重复副本。

最终没关系,因为毕竟这是一条相同的消息。但是事情的整体美学现在似乎消失了,这向我表明我做错了-响应似乎表明有两个独立的上载,但它们是服务器端php的一次调用的一部分。当服务器端脚本只有一次响应机会时,为什么要使客户端“相信”有两个单独的上载请求(即php没有为每个文件发送回不同的消息-应该吗?如果这样,最好的方法是什么去做吗?)

我如何做到这一点,如果我遇到一个全有或全无的情况,我会从php脚本中得到一个单独的响应?

这对我来说尤其重要,因为我的服务器响应将包含状态和其他一些数据。该脚本的作用不仅仅是接收上传的文件(因此超时时间更长)。

我认为这可能是一个信号,我应该将上传部分与处理部分分开,并在上传完成后触发处理。

但是,这意味着服务器端上传脚本本身无法清除。它需要持久保存数据,而不是自己生存。现在,它还需要将该数据的句柄返回给客户端,这将在另一个Ajax调用中分派服务器端处理器,并传递此句柄-随后的调用需要清理上传者在其处理后留下的文件完成了对它们的处理。

这似乎不太优雅。这是我只需要习惯的东西吗?还是有更好的方法来完成我想要的?

此外,我们网络中前端专家的其他免费提示和提示也将受到感激。

谢谢。

1 个答案:

答案 0 :(得分:0)

以下方法有效。直到找到更好的东西为止。

Dropzone.options.inner = {

    // . . .

    init: function() {
      this.on("completemultiple", function(file) {
          var code = JSON.parse(file[0].xhr.response).code;
          var data = { "code" : code };
          $.post('php/......php', data, function(res) {
              // TODO - surface the res back to the user                                                                     
            });
      })
    },
};