html表单内的Dropzone，其他表单字段不起作用

Question

我想在现有表单中添加一个拖放区，但它似乎不起作用。

当我查看控制台时，我收到错误 throw new Error("No URL provided")。当我点击上传时，我也没有预览 - 我得到的只是正常的文件输入。

 <link href="../dropzone.css" rel="stylesheet">

<form action="/" enctype="multipart/form-data" method="POST">

    <input type="text" id ="Username" name ="Username" />

    <div class="dropzone" id="my-dropzone" name="mainFileUploader">
        <div class="fallback">
            <input name="file" type="file" />
        </div>
    </div>

    <div>
      <button type="submit" id="submit"> upload </button>
    </div>

</form>

 <script src="../jquery.min.js"></script>
 <script src="../dropzone.js"></script>

 <script>
  $("my-dropzone").dropzone({ 
     url: "/file/upload",
     paramName: "file"

  });

</script>

Answer 1

No url provided 错误是因为 $("my-dropzone") 错误，而不是它必须是 $('#mydropzone')

dropzone 以及其他表单，是的，这很有可能，您必须使用 dropzone 中提供的 URL 而不是表单操作中提供的 URL 发布数据。这意味着您的所有表单数据以及上传的文件都应发回为 dropzone 提供的 url。一个简单的未经测试的解决方案如下；

<link href="../dropzone.css" rel="stylesheet">

<form action="/" enctype="multipart/form-data" method="POST">

    <input type="text" id ="Username" name ="Username" />

       <div class="dropzone" id="my-dropzone" name="mainFileUploader">
          <div id="previewDiv></div>
          <div class="fallback">
             <input name="file" type="file" />
          </div>
       </div>
       <div>
           <button type="submit" id="submitForm"> upload </button>
       </div>
</form>

<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
        <script>

        $("#mydropzone").dropzone({
            url: "/<controller>/action/" ,
            autoProcessQueue: false,
            uploadMultiple: true, //if you want more than a file to be   uploaded
            addRemoveLinks:true,
            maxFiles: 10,
            previewsContainer: '#previewDiv',

            init: function () {
                var submitButton = document.querySelector("#submitForm");
                var wrapperThis = this;

                submitButton.addEventListener("click", function () {
                    wrapperThis.processQueue();
                });

                this.on("addedfile", function (file) {

                    // Create the remove button
                    var removeButton = Dropzone.createElement("<button class="yourclass"> Remove File</button>");

                    // Listen to the click event
                    removeButton.addEventListener("click", function (e) {
                        // Make sure the button click doesn't submit the form:
                        e.preventDefault();
                        e.stopPropagation();

                        // Remove the file preview.
                        wrapperThis.removeFile(file);
                   });

                    file.previewElement.appendChild(removeButton);
                });

            // Also if you want to post any additional data, you can do it here
                this.on('sending', function (data, xhr, formData) {
                    formData.append("PKId", $("#PKId").val());
                });

                this.on("maxfilesexceeded", function(file) {
                    alert('max files exceeded');
                    // handle max+1 file.
                });
            }
        });
    </script>

初始化 dropzone 的脚本可以在 $document.ready 中，也可以将其包装为函数并在需要初始化时调用。

编码愉快！！