与其他表单域不起作用的HTML表单中的Dropzone

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

没有URL提供的错误是因为$（“mydropzone”）是错误的，而不是它必须是$（“＃mydropzone”）与其他形式沿

悬浮窗，是的，这是非常有可能，您必须使用dropzone中提供的URL发布数据，而不是使用表单操作。这意味着您的所有表单数据以及上传的文件都应该回传给为dropzone提供的网址。一个简单的未经测试的解决方案如下所示;

<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中，也可以作为一个函数包装并在初始化时调用。

快乐编码！