javascript - Chrome 浏览器中的 FakePath 问题

Question

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

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

然后我使用一个按钮来确认播放列表。单击该按钮我调用一个 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]);