Question

我想在现有表单中添加dropzone，但它似乎无法正常工作。

当我查看控制台时，我收到错误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

没有提供网址错误是因为$（“my-dropzone”）错误而不是$（'＃mydropzone'）

dropzone以及其他形式，是的，这是非常可能的，您必须使用dropzone中提供的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中，或者将其作为函数包装，并在想要初始化时调用。

快乐的编码!!

在html表单中的Dropzone与其他表单字段不起作用

1 个答案: