js预览本地资源

最新推荐文章于 2024-07-01 02:17:25 发布

Mr_rencp

最新推荐文章于 2024-07-01 02:17:25 发布

阅读量911

点赞数

分类专栏： js 文章标签： angular url 前端开发

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

浏览器中的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;
}
function createObjectURL(object) {
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>