Chrome文件夹上传API。检测支持并使用JS / JQuery进行解决。

Question

我目前正在开发一个Web媒体播放器，想要使用谷歌浏览器的新"文件夹上传API"（或者官方叫法）递归处理本地目录。不幸的是，我没有找到任何关于此的进一步信息，也不太熟悉HTML5的FileReader对象。是否有任何官方网站或文档介绍这个特定的API呢？

不需要发布完整的代码示例，只需参考JSFiddle网站：http://jsfiddle.net/a869q/ 该示例展示了常规上传方法和使用webkit-directory的方法。

<input id="file_input" type="file" multiple="" />
<input id="file_input_dir" type="file" multiple="" webkitdirectory="" directory="" />
<div id="test"></div>

在event.change事件中，这些文件的引用（blobs）被用于获取mp3文件的时长，并创建音频元素列表。这很好地运作。只有在Chrome中选择目录才有效。

$('#file_input, #file_input_dir').change(function(e) {
    $.each(e.target.files, function(index,file) {
        // ....
        $('#test').append('<audio src="'+window.URL.createObjectURL(file)+'"></audio>');
        // ....
    });
});

现在，我想使用Javascript / jQuery来查找客户端是否支持新的webkit-directory功能，并且我真的希望有一种方法可以做到这一点，而不仅仅是读取UserAgent并检查字符串"Chrome"。 有什么建议吗？

关于这个问题，它目前只能在Chrome中工作，我还想知道是否有常见或适合的解决方法让它在不同的浏览器中工作，但至少要在Firefox中工作。 在此文章中已经发表了一些很好的帖子，其中包含不同的示例。 但主要所有可用的插件都使用Flash或Applets，而我真的想避免这种情况。 仍然希望有解决方案。

此外，谈论我正在收集所选音频文件的持续时间的方法（请参见JSFiddle）。 是否有任何一种方法可以使用纯JScript来完成这项任务，而不创建HTML5-Audio-Elements？

- b4ttl3m4st3r

---

您是否考虑过使用 Chrome 的文件/目录拖放功能？那能否作为一种替代方案呢？ - Tukuna

@Tukna：谢谢，我知道那个功能，但不想在Chrome中寻找替代品。实际上，我计划在以后的版本中也使用拖放功能，但首先必须确定客户对此功能的支持。 - b4ttl3m4st3r

Answer 1

(function() {
var input = document.createElement("input");
input.type = "file";
return !!("webkitdirectory" in (input || document.querySelectorAll("input[type=file]")[0] ))
}())

- guest271314

---

谢谢！if("webkitdirectory" in ($("#file_input_dir")[0]))就是我一直在寻找的。没想到这么简单。我应该研究一下文件API以充分理解：http://www.w3.org/TR/FileAPI/ - b4ttl3m4st3r