H5提供了很多内置函数对象,供我们对本地文件进行读取,个人玩的比较多的是对本地图片,视频,音乐进行读取,在页面上显示或者播放。研究的不是很深,但我想做个笔记。
一、FileReader
FileReader是一个构造函数,翻译为文件读取器,通过const reader = new FileReader可以创造一个文件读取器对象,可看作是一个上下文对象,对象身上包含了readAsDataURL、readAsArrayBuffer
等方法对文件以不同形式进行读取,readAsDataURL读取的形式是data:url,可以直接作为src属性的值。以readAsArrayBuffer形式读取,读取后是ArrayBuffer对象,那么需要用Blob转换一下,然后利用
window.URL.createObjectURL(blob)创建一个blob地址,供src属性使用。reader实例身上的onload方法可见听读取器的读取完成时的状态,也可通过readyState状态码判断。
1 <div id="upload">
2 <input type="file" id="file" />
3 </div>
4 <script>
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 </script>
以上代码可以上传一张图片至页面。
二、Blob
通过reader.readAsDataURL获取的文件元数据会比较长,插入到src属性里面太冗余,性能不好,另外一种方式是通过Blob对象,new Blob([...])第一个参数接收一个数组,把文件对象放到数组里面,
第二个参数接收文件类型,把上传的文件直接通过Blob转换成blob对象,window.URL.createObjectURL(blob)创建一个blob地址,供src属性使用,这种url比较简洁。
1 <div id="upload">
2 <input type="file" id="file" />
3 </div>
4 <script>
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 </script>
同样,上面代码也能打开一张本地图片显示在网页中。
三、AudioContext
AudioContext是一个构造函数,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特性还有很多,例如拖拽文件至网页会获得文件数据,对文件解码后的操作还有很多,后面我想实现一个拖拽图片之网页,首先能够在页面预览,然后能够上传到服务器。