使用dropzone.js從Web應用程序上傳文件

Question

我正在構建一個Web應用程序。 我必須讓用戶上傳圖片或將圖片拖放到瀏覽器中。 為了解決這個問題，我使用了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>

我正在使用以下JavaScript將這段代碼初始化為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();
        }
    });
});

雖然有幾個問題。 如果單擊文本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/