Chrome浏览器中的FakePath问题

Question

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

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

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

Answer 1

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

好消息是您不需要原始文件路径.您可以使用FileReader's' readAsDataURL将文件内容转换为base64编码的数据URL,并将其用作音频src.阅读#myUploadInput和输出#myAudioElement(也可作为工作小提琴):

var reader = new FileReader();

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

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