神奇的H5本地文件读取（FileReader，Blob，AudioContext） |
您所在的位置：网站首页 › 提供js读本地文件功能ie调整页面 › 神奇的H5本地文件读取（FileReader，Blob，AudioContext） |
|
H5提供了很多内置函数对象，供我们对本地文件进行读取，个人玩的比较多的是对本地图片，视频，音乐进行读取，在页面上显示或者播放。研究的不是很深，但我想做个笔记。 一、FileReaderFileReader是一个构造函数，翻译为文件读取器，通过const reader = new FileReader可以创造一个文件读取器对象，可看作是一个上下文对象，对象身上包含了readAsDataURL、readAsArrayBuffer 等方法对文件以不同形式进行读取，readAsDataURL读取的形式是data:url，可以直接作为src属性的值。以readAsArrayBuffer形式读取，读取后是ArrayBuffer对象，那么需要用Blob转换一下，然后利用 window.URL.createObjectURL(blob)创建一个blob地址，供src属性使用。reader实例身上的onload方法可见听读取器的读取完成时的状态，也可通过readyState状态码判断。 1 2 3 4 5 file.onchange = async function(e){ 6 const file = e.target.files[0] 7 const reader = new FileReader(); 8 // 读取文件内容，结果用data:url的字符串形式表示 9 reader.readAsDataURL(file); 10 reader.onload = function(e) { 11 console.log(e.target.result); // 上传的图片的编码 12 const img = new Image() 13 img.src = e.target.result 14 img.onload = function(){ 15 upload.appendChild(this) 16 } 17 } 18 } 19以上代码可以上传一张图片至页面。 二、Blob通过reader.readAsDataURL获取的文件元数据会比较长，插入到src属性里面太冗余，性能不好，另外一种方式是通过Blob对象，new Blob([...])第一个参数接收一个数组，把文件对象放到数组里面， 第二个参数接收文件类型，把上传的文件直接通过Blob转换成blob对象，window.URL.createObjectURL(blob)创建一个blob地址，供src属性使用，这种url比较简洁。 1 2 3 4 5 file.onchange = async function(e){ 6 const file = e.target.files[0] 7 const blob = new Blob([file]) 8 const img = new Image() 9 img.src = window.URL.createObjectURL(blob) 10 img.onload = function(){ 11 upload.appendChild(this) 12 } 13 } 14同样，上面代码也能打开一张本地图片显示在网页中。 三、AudioContextAudioContext是一个构造函数，new AudioContext能够创建一个音频上下文对象，对象的decodeAudioData方法可对音频文件进行解码，createBufferSource方法可以创建数据源对象， 这里我是用了Ajax请求本地文件，实现了网页背景音乐效果，打开网页自动播放，并非使用audio标签的autoplay属性。此实例我是在php服务环境下运行的，本地好像跑不起来，哪怕安装了服务端环境插件也没能行。 1 const audioCxt = new AudioContext()//创建音频上下文对象 内涵众多属性和方法 2 const xhr = new XMLHttpRequest() 3 xhr.responseType = 'arraybuffer' //指定原始数据类型 4 5 xhr.onload = function(){ 6 //对音频进行解码,获得音频buffer数据，注意，第一个参数只能是arrybuffer对象，这里我设置了响应类型是arraybuffer，所以请求过来的本地mp3文件变成了arraybuffer对象 7 audioCxt.decodeAudioData(xhr.response,function(buffer){ 8 //创建音频的数据源对象 9 let sourceNode = audioCxt.createBufferSource() 10 //把解码后的数据绑定到音频的数据源上 11 sourceNode.buffer = buffer 12 //将数据源和音频对象连接起来，准备播放 13 sourceNode.connect(audioCxt.destination) 14 //播放 15 sourceNode.start() 16 }) 17 } 18 xhr.open('post','111.mp3',true) 19 xhr.setRequestHeader('Content-Type', 'audio/mpeg'); 20 xhr.send()哈哈，H5真是令我喜欢有令我烦，隐藏的功能太多啦，我得慢慢去发现，也可能我没有真正意义上的专门学习H5吧。H5特性还有很多，例如拖拽文件至网页会获得文件数据，对文件解码后的操作还有很多，后面我想实现一个拖拽图片之网页，首先能够在页面预览，然后能够上传到服务器。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |