从一个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

回答

相关问题