Question

问题

我有以下代码片段，用于在文件拖放上传期间获取文件信息：

var files = event.dataTransfer.files;

for (var i = 0; i < files.length; i++) {
    var file = files[i];

    // I need notDirectory(file) function.
    notDirectory(file).then(function(file) {
      output.innerHTML += 
           `<p>
              Name: ${file.name}</br> 
              Size: ${file.size} bytes</br> 
              Type: ${file.type}</br> 
              Modified Date: ${file.lastModifiedDate}
            </p>`;
    });
}

我做了研究，发现Firefox不支持目录上传，但允许客户端将它们拖放到放置区域。

问题

如何在Firefox中过滤掉上传处理程序中的目录？

更新

您可以在此处找到工作示例：https://jsfiddle.net/gevorgha/exs3ta25/

请考虑我需要它才能在the latest stable Firefox version - 46.0.1上工作而不启用浏览器的额外偏好设置，因为我不想让用户启用首选项以使上传工作正常。

Answer 1

我的问题是最新的稳定版Firefox是否有任何解决方法版本来检测目录？因为在功能稳定的版本上默认情况下是禁用还是我错过了什么？

默认情况下，在firefox 47中没有启用目录上传，其中在stacksnippets，jsfiddle尝试了html，javascript。

请参阅Firefox 42 for developers Interfaces/APIs/DOM

Directory界面已通过实验扩展（错误 1177688）。两名成员Directory.path和 Directory.getContents可以通过设置来公开 dom.input.dirpicker偏好true。

检测文件夹上传的解决方法可能包括

使用设置了<input type="file">和directory属性的allowdirs，可能包含multiple属性，请参阅Note，点击鼠标进行拖放或用户选择容器;
打开prefs.js或about:config并将dom.input.dirpicker偏好设置为Boolean true;
使用修改版的＆＃34;代码示例＆＃34;为＆＃34; 1。文件输入＆＃34;在Directory Upload Demo;
要检查上传是Directory而非单个File对象，请在{{1}内使用条件为if或(filesAndDirs[0] && filesAndDirs[0].constructor.name === "Directory")的{{1}}链接到.getFilesAndDirectories();
将(filesAndDirs[0] instanceof Directory)元素的.then(function(filesAndDirectories){})元素替换为<label>的父元素。调整<div>的{{1}}以填充父级可放置容器，并将<input type="file">设置为css;在input type="file"的父元素处调整opacity，以0伪元素显示文本，而不是css子元素。

另见New API for directory picking and drag-and-drop。

注意，在firefox 47上尝试了方法，其中目录和单个文件都已成功上传。

＆＃13;

input type="file"

＆＃13;

:before

＆＃13;

input type="file"

＆＃13;

jsfiddle https://jsfiddle.net/exs3ta25/31/

Answer 2

<强>解决方案

我提出了以下适用于Firefox version - 46.0.1

的脏解决方法

使用FileReader API检查上传的文件是否为目录。

<强>代码

＆＃13;

<div id="dropArea" style="border: 1px solid; padding: 50px; text-align: center;">
    Drop your files here!
</div>

<script>
    // Get target elements.
    var dropArea = document.getElementById("dropArea");

    // To be defined.
    function notDirectory(file) {
        return new Promise(function(resolve, reject) {
            var reader = new FileReader();

            // Can read files, but not directories.
            reader.onprogress = function(event) {
                if ('progress' === event.type) {
                    resolve(file);
                    reader.abort();
                }
            };

            // Wait for result.
            reader.readAsDataURL(file);
        });
    }

    // Attach drop listener.
    dropArea.addEventListener("drop", function (event) {
        // Stop propagation.
        event.stopPropagation();
        event.preventDefault();

        // Loop files to filter out directories and print files.
        var files = event.dataTransfer.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];

            // I need notDirectory(file) function.
            notDirectory(file).then(function(file) {
                // Print info.
                console.log({
                    name: file.name,
                    size: file.size,
                    type: file.type
                });
            });
        }
    });

    // Attach drag move listener.
    dropArea.addEventListener("dragover", function (event) {
        // Stop propagation.
        event.stopPropagation();
        event.preventDefault();
    });
</script>

＆＃13;

相关链接

Answer 3

您可以在here（包括Firefix）中阅读一些相关内容。这是一个函数（不是由我编写，但我编辑了一半），它检测drop是文件还是文件夹，并显示其名称，大小和类型（在FireFox中测试）：

function handleDrop(e)
{
    e.stopPropagation();
    e.preventDefault();
    var filesInfo = "";

    var files = e.dataTransfer.files,
        folder;

    for (var i = 0, f; f = files[i]; i++)
    {
        if (!f.type && f.size % 4096 == 0)
            folder = true;
        else
            folder = false;

        filesInfo += 'Name: ' +  f.name;
        filesInfo += '<br>Size: ' +  f.size + ' bytes';
        filesInfo += '<br>Type: ' +  (folder ? 'folder ' : 'file');

        output.innerHTML = filesInfo;
    }
}

我希望你能找到的是什么。祝你好运！

如何在Firefox中过滤掉上传处理程序中的目录？

3 个答案: