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

Question

我想在网页中打开本地 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. 如何避免沙盒问题？

Answer 1

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

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)是只读的!
   用户手动“共享”文件(通过在网页/应用程序上选择/填充文件输入)。从那时起，应用程序可以读取/上传/分析/任何内容到文件(但不能更改/删除/覆盖/等)。