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，文件选择器将无法打开。如果我在文本外部单击，文件选择器将打开。此外，此代码适用于选择文件的初始过程。但是，如果我点击＆＃34;选择......＆＃34;按钮，页面回发。实际上，我期待文件选择器再次出现。如果我点击＆＃34;删除＆＃34;按钮，然后从文件选择器再次选择一个文件，图片，上传进度和操作按钮永远不会出现。

我觉得我以某种方式搞砸了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();你有隐藏的预览元素，并且当你追加新图像时这不会改变状态。 :)。

这个词，但是，你可以看到你添加的旧图片，我认为这是一个新的bug ...我试着解决它...你有没有想到它。

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

使用dropzone.js从Web应用程序上载文件

1 个答案: