Question

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

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

然后我使用按钮确认播放列表。点击按钮我调用javascript函数来更改音频标签的src以播放在播放列表中选择的新音频文件。我希望输入文件中文件的确切路径在HTML5音频播放器中运行，但它开始将路径作为C：//Fakepath/filename.mp3。有人可以帮我这个。

Answer 1

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

好消息是您不需要原始文件路径。您可以使用FileReader的{{3}}将文件内容转换为base64编码的数据网址，并将其用作音频src。要阅读#myUploadInput并通过#myAudioElement（readAsDataURL）输出：

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和path的数组......然后，根据“选择”播放的内容，重新组装完整的本地路径并播放该文件。

这将是我将采取的方法，看看它是否会起作用。这里必要的部分是让用户公开音频文件的路径...但我仍然不能100％确定它会工作，因为早期的评论者发布了一个链接的安全功能。

如果这个包含在用户批准进行本地安装的应用程序中，您可以使用“应用程序目录”来引用它，并将文件复制到“安全位置”，但由于其基于Web的实际上只是打开了一个整体知道您的本地目录结构，可能是未经批准/授权的Web功能。祝你好运，如果你找到解决方案，请告诉我。

Chrome浏览器中的FakePath问题

2 个答案: