Chrome文件夹上传API。检测支持&使用JS / JQuery解决方法 [英] Chrome Folder Upload API. Detect support & Workaround with JS / JQuery

问题描述

我目前正在开发一个网络媒体播放器，并希望使用Google Chrome 中的新文件夹上传API（或者正式名称），以递归方式使用本地目录。不幸的是我无法找到任何关于此的更多信息，我不太熟悉HTML5的FileReader对象。是否有任何机会的特定API的官方网站或文档？

I am currently working on a web media player and would like to use the new "Folder Upload API" from Google Chrome (or however its being called officially) to recursively work with local directories. Unfortunately I wasn't able to find any further information on this and I'm not quite familiar with HTML5's FileReader object. Is there any official site or documentation of that specific API by any chance?

如果没有发布我的示例的完整代码和次代码，我想引用一个JSFiddle网站： http://jsfiddle.net/a869q/

Without posting the entire and minor code of my example, I would like to refer to a JSFiddle site: http://jsfiddle.net/a869q/

该示例同时显示常用上传方法和使用 webkit-directory 的方法。

The example displays both, the 'usual' upload method and the one using webkit-directory.

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

On event.change 引用（blob然后，这些文件被用于获取mp3文件的持续时间并创建音频元素列表。工作得很好。选择目录仅适用于Chrome。

On event.change the references (blobs) to these files are then being used to get duration of mp3-files and to create a list of audio-elements. Works just fine. Choosing directories only works in 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-目录功能，我真的希望有一种方法可以做到这一点，而不只是阅读UserAgent并检查字符串Chrome。有什么想法吗？

Now, using Javascript / jQuery I would like to find out if the client does support the new webkit-directory feature and I really hope that there is a way doing this without just reading the UserAgent and check against string "Chrome". Any ideas?

关于此事，目前只在Chrome上工作，我还想知道是否有一个共同的或合适的解决方法让这项工作在不同的浏览器中，但至少是Firefox。在这篇文章中已经用不同的例子做了一些简洁的帖子。但主要是所有工作插件都使用Flash或Applet，我真的想避免。仍然希望有解决方案。

Regarding the matter, that it's only working in Chrome at the moment, I would also like to know if there is a common or suitable workaround to let this work in different browsers, but at least Firefox. In this article there have been some neat posts made with different examples already. But mainly all the working plugins are using Flash or Applets which I'm really trying to avoid. Still hoping for solution.

此外，谈论我正在收集所选音频文件的持续时间的方法（请参阅JSFiddle）。用纯JScript做这个，不用创建HTML5-Audio-Elements？

In addition, talking about the method I'm gathering the duration of chosen audio-files with (please see JSFiddle). Any way doing this with pure JScript, without creating HTML5-Audio-Elements?

感谢您提前阅读和可能的回复。

Thanks for reading and possible replies in advance.

推荐答案

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

这篇关于Chrome文件夹上传API。检测支持&使用JS / JQuery解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！