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在上传前显示图标

回答

相关问题