浏览器中的JavaScript不能直接直接访问本地资源(例如文件系统,摄像头,麦克风等),除非事先得到了用户的允许。浏览器之所以进行该限制也是很有必要的,试想一下,如果JavaScript能够肆无忌惮的访问本地的文件系统,那么窃取用户隐私数据就变得轻而易举了,当用户访问网络上的某个网页时,不知不觉中自己机器上保存的信用卡卡号,密码,公司的秘密文件等隐私文件或许已经被恶意的JavaScript程序上传到了远方的服务器上,这对用户来说是不可容忍的。
在得到用户允许后我们还是可以播放本地文件的,下面介绍一种方法。
在页面中插入一个input节点并指定type为file,如果需要播放多个文件,可以添加属性multiple。注册文件节点被更新时的回调函数,在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url,然后把该url设置为audio、video或img的src值即可。
- <html>
- <body>
- <input type="file" id="file" onchange="play.call(this)">
- <audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio>
- <script>
- var url;
- function fileChange() {
- URL.revokeObjectURL(url);
- var file = document.getElementById('file').files[0];
- var url = URL.createObjectURL(file);
- console.log(url);
- document.getElementById("audio_id").src = url;
- }
-
- window.URL?window.URL.revokeObjectURL(url):window.webkitURL.revokeObjectURL(url);
- url=(window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
return url;
}
function play(){ - var video=document.getElementById("audio_id");
if(this.files.length) {
video.src = createObjectURL(this.files[0]);
}
} -
-
- </script>
- </body>
- </html>