时间戳

首页 > 解决方案 > 如何检查此 dropzone.js 引导示例中是否已添加文件？

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

问题描述

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

拖放区配置 

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 引导程序来做到这一点？

标签： javascriptjquerydropzone.js

解决方案

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

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

// 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."); });
  }
});

推荐阅读