Dropzone在上傳前顯示圖標

我試圖爲ASP.NET MVC 5應用程序使用dropzone.js，並且出現了一些奇怪的顯示行爲。Dropzone在上傳前顯示圖標

將Dropzone添加到現有表單中。我將autoProcessQueue設置爲false，因爲我希望用戶必須單擊Submit按鈕。在將文件添加到dropzone之後，縮略圖會在其下面顯示兩個圖標。一個是複選框，另一個是X.他們看起來像是成功和失敗的圖標。看看這個圖片：

我也注意到，當用戶點擊該文件我沒有得到進度條動畫。這裏發生了什麼？我有配置錯誤的dropzone嗎？

下面是代碼：

@{ 
    ViewBag.Title = "Home Page"; 
} 

@model WebApplication1.Controllers.TestViewModel 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css"> 

<form id="form" method="post" enctype = "multipart/form-data"> 
    <input type="text" name="Field1" /> 
    <select name="Field2"> 
     <option>A</option> 
     <option>B</option> 
     <option>C</option> 
    </select> 
    <div id="dz-message"> 
     drop file here 
    </div> 
    <input id="submit" type="submit"/> 
</form> 

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script> 

<script> 
    $(document).ready(function() { 
     Dropzone.autoDiscover = false; 

     var myDropzone = new Dropzone("#form", { 
      url: "/Home/Upload", 
      paramName: "Field3", 
      autoProcessQueue: false, 
      maxFiles: 1, 
      clickable: true, 

      init: function() { 
       var dropzone = this; 

       this.element.querySelector("#submit").addEventListener("click", function (e) { 
        e.preventDefault(); 
        e.stopPropagation(); 
        dropzone.processQueue(); 
       }); 
      } 
     }); 
    }); 
</script>

來源

2016-06-24 d512

好了，手掌的額頭。我只是在form元素上沒有dropzone類。早點把它拿下來試一下，然後忘了把它放回去。

Rar。

來源

2016-06-24 05:24:24 d512

Dropzone在上傳前顯示圖標

回答

相關問題