在 Dropzone.js 中构建文件名列表以通过表单提交答案

【问题标题】：Build a list of filenames in Dropzone.js to pass in form submit在 Dropzone.js 中构建文件名列表以通过表单提交
【发布时间】：2017-11-17 12:42:53
【问题描述】：

我一直在努力构建在 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。因为长度在数组的“根”中，所以应该如此。但试图访问这个名字是我难住的地方。困难的部分是数组头部的 [File(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

【问题讨论】：

你试过this.getAcceptedFiles()[0].name 吗？
是的，它返回名称未定义
也检查一下this.getAcceptedFiles()[0][0].name
试过了：expenses.php?id=144:57 Uncaught TypeError: Cannot read property '0' of undefined at Dropzone. (expenses.php?id=144:57) at Dropzone.Emitter.emit (VM17716 dropzone.js:58) 在 Dropzone.addFile (VM17716 dropzone.js:986) 在 Dropzone._addFilesFromItems (VM17716 dropzone.js:912) 在 Dropzone.drop (VM17716 dropzone.js:876) 在HTMLFormElement.listeners.events.drop (VM17716 dropzone.js:655)
我更新了我的答案，如果我错过了什么，请告诉我

标签： javascript php jquery arrays

【解决方案1】：

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>

希望对你有帮助

【讨论】：