文章/答案/技术大牛

发布

社区首页 >问答首页 >在Dropzone.js中构建一个文件名列表以传递表单提交

问在Dropzone.js中构建一个文件名列表以传递表单提交
EN

Stack Overflow用户

提问于 2017-11-17 12:42:53

回答 1查看 2.2K关注 0票数 0

我一直在努力构建一个文件名列表，这些文件名在Dropzone.js中排队等待上传。几个星期以来，我一直在论坛上寻找答案。https://github.com/enyo/dropzone/issues/1652

我从这里开始：https://github.com/enyo/dropzone/wiki/Upload-all-files-with-a-button。

在代码的这一节中，我正在工作：

    this.on("addedfile", function() {
      console.log(this.getAcceptedFiles(file));
    });

此函数返回关于要在单击时上载的排队文件的信息数组。数组如下所示：

[File(75099)]
   0: File(75099)
     accepted: true
     lastModified: 1508061061300
     lastModifiedDate: Sun Oct 15 2017 05:51:01 GMT-0400 (Eastern Daylight  Time) {}
     name: "ITI-TV-REPAIR-FORM.pdf"
     previewElement: div.dz-preview.dz-file-preview
     previewTemplate: div.dz-preview.dz-file-preview
     size: 75099
     status: "queued"
     type: "application/pdf"
     upload: {progress: 0, total: 75099, bytesSent: 0}
     webkitRelativePath: ""
     _removeLink: a.dz-remove
     __proto__: File
     length: 1
     __proto__: Array(0)

我知道如果我使用this.getAcceptedFiles().length。由于长度位于数组的“根”中，因此它将返回1。但想要查到这个名字却让我很困惑。最难的部分是数组顶部的文件(75099)总是会改变，但是键名总是在同一个位置。

我在打字的时候想得很大声。我刚刚想到的是，如果我能够对数组进行键值搜索，因为我知道我要寻找的键是name：。

我尝试访问名称值

this.getAcceptedFiles().name

当然，这是行不通的。因此，我的最后一个问题是，访问这个数组中的键值以获取文件名的最佳方法是什么？

更新:想清楚！

            this.on("addedfile", function(file) {
                //returns file names that are in the queue
                console.log(file.name);

            });

完整代码在这里：https://github.com/enyo/dropzone/issues/1652

jquery

arrays

javascript

php

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-17 13:35:15

每当将文件添加到上载文件列表中时，都会调用addedfile事件，还可以在事件回调中作为参数获取添加的文件：

this.on("addedfile", function(file) {
    console.log(file.name)
});

下面是一个有用的例子：

Dropzone.options.myDropzone = {

  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,
  
  acceptedFiles: 'image/*',

  init: function() {
    var submitButton = document.querySelector("#submit-all");
    myDropzone = this;

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function(file) {
      console.log(file.name)
    });

  }
};

<!DOCTYPE html>

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">

<!-- Change /upload-target to your upload address -->
<form action="/upload-target" class="dropzone" id="my-dropzone"></form>
<br>
<button id="submit-all">Submit all files</button>

希望这能有所帮助

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47350923

复制

相似问题

问在Dropzone.js中构建一个文件名列表以传递表单提交
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Dropzone.js中构建一个文件名列表以传递表单提交EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Dropzone.js中构建一个文件名列表以传递表单提交
EN