javascript - 使用 dropzone.js 从 Web 应用程序上传文件

Question

我正在构建一个网络应用程序。我必须让用户上传图片或将图片拖放到浏览器中。为了帮助解决这个问题，我使用 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();
        }
    });
});

但是有几个问题。如果我单击文本在此处拖放图片，文件选择器不会打开。如果我单击文本外部，则会打开文件选择器。此外，此代码适用于选择文件的初始过程。但是，如果我单击“选择...”按钮，页面会回发。事实上，我期待文件选择器再次出现。如果我单击“删除”按钮，然后从文件选择器中再次选择一个文件，则图片、上传进度和操作按钮永远不会出现。

我觉得我不知何故搞砸了拖放区的初始化。我究竟做错了什么？为什么我点击提示文字后无法选择另一张图片或删除图片并选择另一张图片或打开文件选择器？

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/