從一個Web應用程序上傳文件，dropzone.js

我建立一個web應用程序。我必須讓用戶上傳圖片或將其拖放到瀏覽器中。爲了解決這個問題，我使用了dropzone.js。我的挑戰是，我需要自定義外觀。從一個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初始化此代碼作爲懸浮窗：

$(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，文件選取器不會打開。如果我在文本外單擊，文件選取器將打開。此外，此代碼適用於選擇文件的初始過程。不過，如果我點擊「Pick ...」按鈕，該頁面會回發。實際上，我期待文件選取器再次出現。如果我點擊「刪除」按鈕，然後再從文件選擇器中選擇一個文件，則圖片，上傳進度和動作按鈕不會出現。

我覺得我莫名其妙地搞砸了懸浮窗的初始化。我究竟做錯了什麼？爲什麼我不能選擇其他圖片或刪除圖片並選擇另一張圖片，或者如果我單擊提示文字，則打開文件選取器？

來源

2014-10-06 JQuery Mobile

我已經改變了你的代碼

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

我覺得再行：$('#previews').hide();你有隱藏預覽元素，當你添加新的圖像這不會改變狀態。 :)。

而且這個詞，但是，你可以看到你添加的老照片，我認爲這是一個新的bug ......我想溶質它......你有沒有爲它的主意。

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

來源

2014-10-08 19:12:30 HoangHieu

謝謝你的嘗試。但是，仍然存在兩個問題：1）jsfiddle在Chrome或Firefox中不起作用。 2）如果我在添加圖片後刪除圖片，則添加另一張圖片，第一張圖片仍會出現在預覽中。 – 2014-10-09 12:32:12

所以。如果#previews不會再次顯示，你無法看到刪除按鈕，並不能看到**「拖曳到這裏拖放圖片」 **再次 – HoangHieu 2014-10-10 16:15:26

**而這個詞，但是，你可以看到老照片你補充說，我認爲這是一個新的bug ...我試圖解決它...你有想法吧。** 我已經注意到它在答案，這是一個新的錯誤。 – HoangHieu 2014-10-10 16:16:28

從一個Web應用程序上傳文件，dropzone.js

回答

相關問題