文件输入数据未与 Dropzone 形式的 POST 数据一起传输答案

【问题标题】：File input data not transferred with POST data of Dropzone form文件输入数据未与 Dropzone 形式的 POST 数据一起传输
【发布时间】：2014-06-11 16:48:01
【问题描述】：

这是this question 的延续，在根据那里给出的建议取得了一些进展之后。

我有一个 Typo3 表格，大约有这样的标记：

<form enctype="multipart/form-data" method="post" name="form" id="general" action="index.php?id=328">


    <ul class="inline-textbox">
      <li>

          <input type="text" id="first_name" name="tx_applicationformgeneral[form][name]" value="" placeholder="Name *">
      </li>
    </ul>



    <div class="dropzone-previews">

    </div>



 <input class="button" type="submit" name="tx_applicationformgeneral[mySubmit]" value="Submit">

 </form>

提交表单时，如果没有上传文件，POST数据包含这个sn-p：

  ------WebKitFormBoundarySq0AkJrSAe1kmAOu
  Content-Disposition: form-data; name="tx_applicationformgeneral[form][files][]";      filename=""
  Content-Type: application/octet-stream

这是上传文件时的 POST 数据：

 ------WebKitFormBoundaryrEmFA8jYcHY56WAB
 Content-Disposition: form-data; name="tx_applicationformgeneral[form][files][]";      filename="DSC01413_01.JPG"
 Content-Type: image/jpeg

我通过将dropzone 类添加到表单元素并传递这些初始化选项，将表单变成了 Dropzone：

 Dropzone.options.general = {
                paramName: "tx_applicationformgeneral[form][files][]", // The name that will be used to transfer the file
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,
                addRemoveLinks: true,

                // The setting up of the dropzone
                init: function() {
                    var myDropzone = this;

                    console.log("Dropzone init");

                    // First change the button to actually tell Dropzone to process the queue.
                    this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                        // Make sure that the form isn't actually being sent.
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                    });



                }
            };

这似乎可以初始化 Dropzone：我可以将文件拖放到表单上，然后会出现预览。但是当我单击“提交”时，根本不会发送任何文件上传字段数据。标题为“tx_applicationformgeneral[form][files][]”或任何变体的 POST 标头中没有任何内容。它在 POST 数据中完全不存在，尽管所有其他字段通常都包含在内。如果我将 paramName 重命名为

，情况仍然如此

  paramName: "tx_applicationformgeneral[form][files]"

因为文件上传没有收到任何内容，当至少需要一个空字段时，我在后端收到一个丑陋的 Typo3 错误，并且没有任何处理。

我猜是 Dropzone 将此字段插入到 POST 数据中存在问题。我本来预计，如果问题是 paramName 错误，那么数据将在名称不正确的 POST 数据中可见，并且我仍然会看到后端错误。相反，根本没有文件上传数据。

谁能建议可能发生的事情？

更新

我遇到了一个错误：当我的表单使用 input[type="submit"] 时，我的目标是 button[type="submit"]。尚未修复，但已发展为新的有趣的故障。

【问题讨论】：

标签： javascript forms dropzone.js

【解决方案1】：

因为我为提交按钮使用了不正确的选择器，所以没有触发 Dropzone 队列处理。当我的表单使用 input[type="submit"] 时，我的目标是 button[type="submit"]。

【讨论】：