gpt4 book ai didi

javascript - HTML "File"/打开文件对话框解决方法

转载 作者:行者123 更新时间:2023-11-28 07:34:05 26 4
gpt4 key购买 nike

我想在网页中打开本地 mp4 电影并在那里播放。
没有上传到任何地方,没有其他。
我使用自己的按钮和以下解决方法,该方法适用于 Safari 7.1.3。

<label for="fileToOpen">
<button type="file" id="loadMedia" class="loadMediabutton button">Load Movie</button>
</label>
<input type="File" name="loadMedia" id="fileToOpen" style="display:none">

现在我的问题是,是否有人可以帮助继续:

  1. 如何从 <input> 检索电影的本地 URL标签?
  2. 如何将网址传递给<video>标签src属性?
  3. 如何避免沙盒问题?

最佳答案

回答您的问题(为了清楚起见,我稍微改了一下措辞):

  1. How to retrieve the movie's local url from the file-input ?

    例如,用户使用以下内容填充文件输入:
    c:\Users\用户名\我的文档\file.ext
    在现代浏览器上(除了具有宽松安全设置的 IE,它几乎只用于受信任的私有(private) Intranet 使用)无法获取实际的本地路径 (c:\Users\Username\My Documents\),因为这会带来明显的隐私问题(安全问题)。
    相反,您将得到C:\fakepath\。获取文件名和扩展名 (file.ext) 没有问题。
    请看我的detailed up-to-date answer about this here .

  2. How to pass the file's URL to the video's src attribute ?

    解决没有有效 URL(在本例中使用 file:/// 协议(protocol))设置视频源属性(或图像、音频等)的问题。 ),现代浏览器有 URL Store

    可以将其视为一个小型本地私有(private)(其他人无法访问它)迷你网络服务器(包括 XMLHttpRequest 的状态代码),提供任何类型的二进制或数据服务。
    这些 URL 的生存时间永远不会长于浏览器的 session (因此将它们存储在本地存储等中是无用的),或者可以在第一次使用时自动撤销(使用 createFor)或手动使用(revokeObjectURL)。

    在这种情况下,一个简单的 URL.createObjectURL(/*file-reference*/) 将为浏览器的 URL 存储中的实际本地文件路径创建匿名 URL,然后您可以像这样使用任何其他提供的内容。

    请参阅以下示例,只是帮助您入门:

    window.URL = window.URL || window.webkitURL;  //fallback for older prefixed objects

    document.getElementById('loadMedia').onclick=function(){
    document.getElementById('fileToOpen').click();
    };

    document.getElementById('fileToOpen').onchange=function(){
    if(this.files && this.files[0]){
    var vid = document.getElementById('vid');
    document.getElementById('vid_name').innerHTML=this.files[0].name;
    // revoke previous url
    vid.getAttribute('src') && URL.revokeObjectURL(vid.getAttribute('src'));
    // set new url
    vid.setAttribute('src', URL.createObjectURL(this.files[0]));
    vid.load();
    }
    };
    <label for="fileToOpen">
    <button type="file" id="loadMedia" class="loadMediabutton button">Load Movie</button>
    </label>
    <input type="File" name="loadMedia" id="fileToOpen" style="display:none">
    <span id="vid_name"></span>
    <br>
    <video id="vid" controls="controls"></video>

    请注意,安装了 flashblocker 后,在用户激活它之前,不会有视频元素,就像使用 Flash 一样。在用户“运行”被阻止的视频之前,无法获取视频元素并随后设置其源-元素。解决这个问题超出了我的回答范围。

  3. How to avoid sandboxing problems ?

    据我所知,您没有在这里处理沙盒文件系统(因为您没有将本地文件复制到本地沙盒文件系统进行存储),有什么问题?
    URL 存储链接到的本地文件(或内存中的 BLOB)是只读的!
    用户手动“共享”文件(通过在网页/应用程序上选择/填充文件输入)。从那时起,应用程序可以读取/上传/分析/任何内容到文件(但不能更改/删除/覆盖/等)。

关于javascript - HTML "File"/打开文件对话框解决方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28794941/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com