使用dropzone.js从web应用程序上传文件

我正在构建一个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的初始化。我做错了什么？如果单击提示文本，为什么我不能选择另一张图片、删除图片并选择另一个图片或打开文件选择器？