Chrome浏览器中的FakePath问题

Question

我正在制作一个基于浏览器的音频播放器。因此，为了从我正在使用的本地目录中制作一个播放列表：

<input type="file" id="getFile" />

然后，我使用按钮来确认playlist.On点击按钮，我正在调用javascript函数来改变音频标签的src，以播放在播放列表中选择的新音频文件。我希望输入文件中的文件的确切路径在HTML5音频播放器中运行，但它开始采用C://Fakepath/filename.mp3的路径。有人能帮我一下吗。

Answer 1

根据设计，这是一个安全特性。您应该无法读取输入到浏览器表单中的文件的原始文件路径。文件输入仅用于读取文件内容，而不用于读取用户文件系统上的路径等元数据。

好消息是您不需要原始文件路径。您可以使用FileReader的readAsDataURL将文件内容转换为base64编码的数据URL，并将其用作音频src。要从#myUploadInput读取并通过#myAudioElement (also available as a working fiddle)输出：

var reader = new FileReader();

reader.onload = function (event) {
    document.getElementById("myAudioElement").src = event.target.result;
};

reader.readAsDataURL(document.getElementById("myUploadInput").files[0]);

Answer 2

如果用户正在‘构建’/创建基于他们本地文件的播放列表，您可以做一个‘浏览’字段，他们在其中选择本地音频文件，然后获取该字段的内容(应该包括这些图像的路径)，构建一个count/id、filename.mp3和路径的数组……然后，根据“选择”播放的内容，只需重新组装完整的本地路径并播放该文件。

这是我无论如何都会采取的一种方法，看看它是否有效。这里需要做的是让用户公开音频文件的路径……但我仍然不能百分之百地确定它是否会工作，因为之前的评论者发布了一个链接到安全功能。

如果这是包含在用户批准的本地安装的应用程序中，你可以使用‘应用程序目录’引用它，并将文件复制到那个‘安全位置’，但由于它是基于web的，因此在知道您的本地目录结构的潜在未经批准/授权的web函数方面，它确实打开了一整罐蠕虫。祝你好运，如果你找到了解决方案，请告诉我。