Загрузка файла из веб-приложения с помощью dropzone.js

Question

Я создаю веб-приложение. Я должен позволить пользователю загрузить изображение или перетащить его в браузер. Чтобы помочь с этим, я использую dropzone.js. Моя задача: мне нужно немного настроить внешний вид.

Для моей настройки требуются функции, которые выглядят довольно продвинутыми в dropzone.js. В принципе, мне нужно: сразу можно загрузить только один файл. Пока файл загружается, мне нужно показать индикатор выполнения. После загрузки я должен позволить пользователю либо: a) удалить существующее изображение или b) заменить изображение на другое. В попытке к этому, я в настоящее время имею следующий HTML:

<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 используя следующий JavaScript:

$(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(); 
     } 
    }); 
}); 

Есть несколько проблем, однако. Если я нажму текст 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/