Javascript dropzone.js - 为文件上传选择一个文件夹答案

【问题标题】：Javascript dropzone.js - Choosing a Folder for file uploadJavascript dropzone.js - 为文件上传选择一个文件夹
【发布时间】：2018-11-15 01:40:26
【问题描述】：

我正在使用dropzone.js 上传多个文件。使用它，我可以从一个文件夹中选择多个文件，并且在选择多个文件时，我只会从我的列表中选择一组文件。

相反，我需要选择一个文件夹（目录）

我可以拖放文件夹。当我单击 dz-clickable 时，我应该执行相同的功能

我的 HTML 代码

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Upload or drag your files here</span>
    </div>
</div>

我的 Javascript 代码

var myDropzone = new Dropzone("div#myDrop", {
addRemoveLinks: true,
autoProcessQueue: false,
parallelUploads: maxParallelCount,
url: "#",
transformFile: function transformFile(file, done) {
  zip = new JSZip();
  zip.file(file.name, file);
  zip.generateAsync(
    {
      type:"blob",
      compression: "DEFLATE"
    }
  ).then(function(content) {
    done(content);
  });
},
init: function() {
    this.on("addedfile", function(file) {
        if (jQuery.inArray(file.name, addedfiles) > -1) {
            myDropzone.removeFile(file);
        }
        if (jQuery.inArray(file.name, DOC_NAMES) == -1) {
            myDropzone.removeFile(file);
        }
        else {
            addedfiles.push(file.name);
            queueCount += 1;
        }
    });
    this.on("removedfile", function(file) {
        console.log(file.name);
        if (jQuery.inArray(file.name, addedfiles) > -1) {
            // addedfiles.pop(file.name);
            var indOfAddedFiles = addedfiles.indexOf(file.name);
            console.log("indOfAddedFiles -> "+ indOfAddedFiles);
            addedfiles.splice(indOfAddedFiles, 1);
            queueCount -= 1;
        }
    })
}

我如何选择一个目录并相应地执行我的过程？有什么想法吗？

【问题讨论】：

标签： javascript html file-upload dropzone.js dropzone

【解决方案1】：

让我回答我的问题

通过在hiddenFileInput中将属性webkitdirectory设置为true来实现选择文件夹

与type 属性一起，添加like

_this3.hiddenFileInput = document.createElement("input");
_this3.hiddenFileInput.setAttribute("type", "file");
_this3.hiddenFileInput.setAttribute("webkitdirectory", true);

【讨论】：

【解决方案2】：

只是为@Sri 提供解决方案的上下文

$("div#dropzoneDiv").dropzone({
            url: '/upload',
            init: function() {
                this.hiddenFileInput.setAttribute("webkitdirectory", true);
            }
        });

【讨论】：

【解决方案3】：

我认为 Dropzone.js 不允许上传整个目录（或者他们的文档中没有指定）

【讨论】：

有什么办法可以做到吗？
我不这么认为，即使在操作系统层面，文件夹只是文件的容器，有很多操作是你无法对它们进行的
但是通过拖拽就实现了！
Firefox 不允许删除文件夹。