javascript Chrome 浏览器中的 FakePath 问题

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18254118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 11:13:41  来源:igfitidea点击:

FakePath issue in Chrome browser

javascripthtmlhtml5-audio

提问by user1580096

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" />

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.

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

回答by apsillers

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.

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

The good news is that you don't need the original file path. You can use FileReader's readAsDataURLto convert the file contents into a base64-encoded data URL and use that as the audio src. To read from #myUploadInputand output through #myAudioElement(also available as a working fiddle):

好消息是您不需要原始文件路径。您可以使用FileReader'sreadAsDataURL将文件内容转换为 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]);

回答by tamak

if the user is 'building' / creating the playlist based on files they have locally you could do a 'browse' field (s) where they select the local audio files, then take the contents of the field (that Should include the paths to those images), build an array of the count/id, filename.mp3, and path... then, based on what is 'chosen' to play, just reassemble the full local path and play that file.

如果用户根据他们在本地拥有的文件“构建”/创建播放列表,您可以在他们选择本地音频文件的地方做一个“浏览”字段,然后获取该字段的内容(应该包括到那些图像),构建一个包含计数/ID、文件名.mp3 和路径的数组……然后,根据“选择”播放的内容,重新组合完整的本地路径并播放该文件。

that would be an approach I would take anyway to see if it would work. the necessary piece here is getting the user to disclose the paths to the audio files... but Im still not 100% sure it would work given the security feature that the earlier commenter posted a link to.

这将是我无论如何都会采取的一种方法,看看它是否有效。这里必要的部分是让用户公开音频文件的路径......但鉴于较早的评论者发布了链接的安全功能,我仍然不能100%确定它会起作用。

if this were included in an application the user approved for local installation you could just refer to it using the 'application directory' and copy the file to that 'safe location' but since its web based it just really opens up a whole can of worms in terms of a potentially unapproved / authorized web function knowing your local directory structure. good luck, let me know if you find a solution.

如果这包含在用户批准本地安装的应用程序中,您可以使用“应用程序目录”引用它并将文件复制到该“安全位置”,但由于它基于网络,因此它确实打开了一整罐蠕虫就可能未经批准/授权的 Web 功能而言,了解您的本地目录结构。祝你好运,如果你找到解决办法,请告诉我。