Chrome浏览器中的FakePath问题 [英] FakePath issue in Chrome browser

问题描述

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

I am making a browser based audio player. So for making a playlist from the local directory I am using :

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

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

Then I am using a button to confirm the playlist.On clicking the button I am calling a javascript function to change the src of the audio tag to play the new audio file selected in the playlist. I want the exact path of the file from the input file to run in the HTML5 audio player but it starts taking the path as C://Fakepath/filename.mp3. Can someone help me with this.

推荐答案

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

This is a security feature, by design. You should not be able to read the original file path of a file input into a browser form. File input is for reading file contents only, not metadata like path on the user's file system.

好消息是您不需要原始文件路径。您可以使用 FileReader 的 readAsDataURL 将文件内容转换为base64编码的数据URL并将其用作音频 src 。从 #myUploadInput 并通过 #myAudioElement 输出（也可用作工作小提琴）：

The good news is that you don't need the original file path. You can use FileReader's readAsDataURL to convert the file contents into a base64-encoded data URL and use that as the audio src. To read from #myUploadInput and output through #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]);

这篇关于Chrome浏览器中的FakePath问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！