업로드하기 전에 아이콘을 표시하는 Dropzone

Question

dropzone.js을 ASP.NET MVC 5 앱에 사용하려고하는데 이상한 디스플레이 동작이 나타납니다.

기존 양식에 Dropzone을 추가하고 있습니다. 나는 사용자가 Submit 버튼을 클릭해야하기 때문에 autoProcessQueue을 false으로 설정했습니다. 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> 

Answer 1

좋아, 손바닥 : 여기

는 코드입니다. 방금 요소에 dropzone 클래스가 없었습니다. 이전에 뭔가를 시도하고 다시 넣는 것을 잊었습니다.