dropzone.js를 사용하여 웹 응용 프로그램에서 파일 업로드

Question

웹 응용 프로그램을 구축 중입니다. 나는 사용자가 사진을 업로드하거나 브라우저에 드래그 앤 드롭 할 수 있도록해야한다. 이를 돕기 위해 dropzone.js을 사용하고 있습니다. 내 도전 과제는 모양을 약간 사용자 지정해야합니다.

내 사용자 정의에는 dropzone.js에서 꽤 앞으로 보이는 기능이 필요합니다. 기본적으로, 나는 단 하나의 파일 만 한번에 업로드 할 수있다. 파일이 업로드되는 동안 진행률 표시 줄을 표시해야합니다. 업로드가 끝나면 사용자에게 a) 기존 사진을 삭제하거나 b) 다른 사진으로 사진을 바꿀 수있게해야합니다.

<div id="myDropZone" style="cursor:pointer;"> 
    <div class="files" id="previews"> 
    <div id="template" class="file-row"> 
     <ul class="list-inline"> 
     <li> 
      <span class="preview" style="width:300px;"><img data-dz-thumbnail /></span> 
      <p class="size" data-dz-size></p> 
     </li> 
     <li style="vertical-align:top;"> 
      <ul id="pictureActions" class="list-unstyled"> 
      <li> 
       <button class="btn btn-default dz-clickable file-input-button"> 
       <i class="glyphicon glyphicon-picture"></i> 
       <span>Pick...</span> 
       </button> 
      </li> 
      <li> 
       <button data-dz-remove class="btn btn-danger btn-block" style="margin-top:8px;"> 
       <i class="glyphicon glyphicon-trash pull-left"></i> 
       <span>Delete</span> 
       </button> 
      </li> 
      </ul> 
     </li> 
     </ul> 

     <div id="uploadProgress" class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> 
     <div class="progress-bar progress-bar-warning" style="width:0%;" data-dz-uploadprogress> 
      <span>Please wait...</span> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div id="uploadPrompt">Drag-and-drop a picture here</div> 
</div> 

나는 다음과 같은 자바 스크립트를 사용하여 DROPZONE로이 코드를 초기화하고 있습니다 : 몇 가지 문제가 있지만이 있습니다

$(function() { 
    var previewNode = document.querySelector("#template"); 
    previewNode.id = ""; 
    var previewTemplate = previewNode.parentNode.innerHTML; 
    previewNode.parentNode.removeChild(previewNode); 

    var pictureDropZone = new Dropzone("div#myDropZone", { 
     url: "/pictures/upload", 
     clickable: true, 
     uploadMultiple: false, 
     autoProcessQueue: true, 
     previewTemplate: previewTemplate, 
     previewsContainer: "#previews", 
     init: function() { 
      this.on("complete", function (data) { 
       $('#pictureActions').show(); 
       $('#uploadProgress').hide(); 
       $('#uploadPrompt').hide(); 
      }); 
     }, 
     uploadprogress: function (e, progress) { 
      $('#uploadProgress').css('width', progress); 
     }, 
     removedfile: function() { 
      $('#previews').hide(); 
      $('#uploadPrompt').show(); 
     } 
    }); 
}); 

이에 시도, 나는 현재 다음과 같은 HTML이있다. Drag-and-drop a picture here 텍스트를 클릭하면 파일 선택 도구가 열리지 않습니다. 텍스트 바깥을 클릭하면 파일 선택 도구가 열립니다. 또한이 코드는 파일을 선택하는 초기 프로세스에서 작동합니다. 그러나 "선택 ..."버튼을 클릭하면 페이지가 다시 게시됩니다. 실제로 파일 선택 도구가 다시 나타나기를 기대하고있었습니다. '삭제'버튼을 클릭 한 다음 파일 선택기에서 파일을 다시 선택하면 그림, 업로드 진행률 및 작업 버튼이 표시되지 않습니다.

나는 dropzone의 초기화를 어떻게 든 망쳐 놓은 것처럼 느낍니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 프롬프트 텍스트를 클릭하면 다른 그림을 선택하거나 그림을 삭제하고 다른 그림을 선택하거나 파일 선택기를 열 수없는 이유는 무엇입니까?

Answer 1

내가

this.on("complete", function (data) { 
     $("#previews").show();  //This line added ... and it's worked... 
     $('#pictureActions').show(); 
     $('#uploadProgress').hide(); 
     $('#uploadPrompt').hide(); 
}); 

난 다음 라인을 생각 코드 변경 : $('#previews').hide(); 당신이 미리 요소를 숨긴, 당신은 새로운 이미지를 추가 할 때이 상태를 변경할 수 없습니다. :).

그리고이 단어는, 당신이 추가 한 오래된 사진을 볼 수 있습니다, 나는 그것이 새로운 버그라고 생각합니다 ... 나는 그것을 풀어려고 노력했습니다 ... 당신은 그것을 생각해 봤습니까?

http://jsfiddle.net/qek0xw1x/15/