與其他表單域不起作用的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中，也可以作爲一個函數包裝並在初始化時調用。

快樂編碼！