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

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/

请考虑我需要它来处理最新稳定的Firefox版本--46.0.1而不启用浏览器的额外首选项,因为我不想要求用户启用首选项以使上传正常工作.

Answer 1

解决方案

我想出了以下适用于Firefox 版本 - 46.0.1 的肮脏解决方法

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

代码

<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>

相关链接

• 文件读取器API
• JavaScript 承诺