使用dropzone.js从Web应用程序上传文件 [英] Uploading a file from a web app with dropzone.js

问题描述

我正在构建一个Web应用程序。我必须让用户上传图片或将图片拖放到浏览器中。为了解决这个问题，我正在使用 dropzone.js 。我的挑战是，我需要对外观进行一些自定义。

I am building a web app. I have to let a user upload a picture or drag-and-drop one into the browser. To help with this, I'm using dropzone.js. My challenge is, I need to customize the appearance a bit.

我的自定义功能要求dropzone.js中的功能相当先进。基本上，我需要：一次只能上传一个文件。上传文件时，我需要显示一个进度栏。上传后，我需要让用户a）删除现有图片或b）用另一张图片替换图片。为此，我目前使用以下HTML：

My customization requires features that seem pretty forward in dropzone.js. Basically, I need: only one file can be uploaded at once. While the file is being uploaded, I need to show a progress bar. Once uploaded, I need to let the user either a) remove the existing picture or b) replace the picture with another one. In an attempt to this, I currently have the following 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：

I am initializing this code as a dropzone using the following 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();
        }
    });
});

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

There are several problems though. If I click the text Drag-and-drop a picture here, the file picker does not open. If I click outside of the text, the file picker opens. Also, this code works for the initial process of choosing a file. However, if I click the "Pick..." button, the page does a post back. In reality, I was expecting the file picker to appear again. If I click the "Delete" button, and then choose a file again from the file picker, the picture, upload progress and action buttons never appear.

我觉得我正在以某种方式搞砸了dropzone的初始化工作。我究竟做错了什么？如果单击提示文本，为什么不能选择另一张图片或删除一张图片然后选择另一张图片或打开文件选择器？

I feel like I'm screwing up the initialization of the dropzone somehow. What am I doing wrong? Why can't I choose another picture or delete a picture and choose another one or open the file picker if I click the prompt text?

推荐答案

我已经更改了您的代码

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

我想然后一行： $（'＃previews'）。hide（ ）; 您具有隐藏的预览元素，并且在添加新图像时不会更改状态。 :)。

i think then line: $('#previews').hide(); you have hidden preview element, and this not change status when you append new image. :).

这个词，但是，您可以看到您添加的旧图片，我认为这是一个新的错误...我试图解决它...您对此有想法吗？

And this word but, You can see old picture you added, I think it's a new bug... I trying solute it... Have you idea for it.

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

这篇关于使用dropzone.js从Web应用程序上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！