如何检查此 dropzone.js 引导示例中是否已添加文件？答案

【问题标题】：How to check if file has been added in this dropzone.js bootstrap example?如何检查此 dropzone.js 引导示例中是否已添加文件？
【发布时间】：2020-01-02 23:09:59
【问题描述】：

输入文件类型已被设置为按钮。我不明白的是如何获取文件输入以检查它是否已添加。

拖放区配置

var myDropzone = new Dropzone(".container", { // Make the whole body a dropzone
  url: "/images-save", // Set the url
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  maxFilesize: 255,
  maxFiles: 1,
  autoQueue: false, // Make sure the files aren't queued until manually added
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
  acceptedFiles: ".png,.jpg,.gif,.jpeg",
  dictFileTooBig:"image file exceeds ----", 
  autoProcessQueue: false,
});

Dropzone.js 引导

  <div id="actions" class="row">
      <div class="col-lg-7">

        <!-- The fileinput-button span is used to style the file input field as button -->
        <span class="btn btn-success fileinput-button dz-clickable">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
        </span>
        <button type="submit" class="btn btn-primary start" >
            <i class="glyphicon glyphicon-upload"></i>
            <span>Start upload</span>
        </button>
        <button type="reset" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            <span>Cancel upload</span>
        </button>
      </div>
  </div>

例如一个普通的输入表单是这样的：

<input type="file" id="inputfile">

我会去检查：

if(document.getElementById("inputfile").value != "") {
   // checking if there is a file added
}

那么如何使用 dropzone.js 引导程序做到这一点？

【问题讨论】：

您阅读文档了吗？ dropzonejs.com/#events

标签： javascript jquery dropzone.js

【解决方案1】：

Dropzone 有一个名为“ addedFile”的事件

您可以在此documentation 中阅读有关它支持的事件的更多信息。

// The recommended way from within the init configuration:
Dropzone.options.myAwesomeDropzone = {
  init: function() {
    this.on("addedfile", function(file) { alert("Added file."); });
  }
};

此代码可能对您有用：

var myDropzone = new Dropzone(".container", { // Make the whole body a dropzone
  url: "/images-save", // Set the url
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  maxFilesize: 255,
  maxFiles: 1,
  autoQueue: false, // Make sure the files aren't queued until manually added
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
  acceptedFiles: ".png,.jpg,.gif,.jpeg",
  dictFileTooBig:"image file exceeds ----", 
  autoProcessQueue: false,
  init: function() {
    this.on("addedfile", function(file) { alert("Added file."); });
  }
});

【讨论】：