目录
引言
在HTML5中,我们可以使用FileReader
API来读取用户通过<input type="file">
元素选择的文件。这个API允许Web应用程序异步地读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据。
知识点陈列
```html```
☞ FileReader
FileReader 接口有3个用来读取文件方法返回结果在result中
- readAsBinaryString ---将文件读取为二进制编码
- readAsText ---将文件读取为文本
- readAsDataURL ---将文件读取为DataURL
☞ FileReader 提供的事件模型
- onabort 中断时触发
- onerror 出错时触发
- onload 文件读取成功完成时触发
- onloadend 读取完成触发,无论成功或失败
- onloadstart 读取开始时触发
- onprogress 读取中
适用范围:上传小文件
实现代码
获取文件:只获取了一个文件
开始读取:创建读取器对象,调用该对象里的方法,将文件读取为xxx格式
读取结果:当文件读取完成之后,才打印文件里的内容
<body> <input type="file" name=""> <script type="text/javascript"> var input = document.querySelector("input"); // 当文件输入元素的内容改变时(例如用户选择了一个新的文件),这个匿名函数会被调用 input.onchange = function () { //获取到文件 var file = this.files[0]; //开始读取,创建读取器 var reader = new FileReader(); //开始读取 reader.readAsText(file); //获取读取的结果 //当文件读取完成后,才可以获取文件信息内容 reader.onload = function () { console.log(reader.result); } } </script> </body>
当提交了文件之后,在控制台会打印出文件里的内容
案例-读取图片显示
1完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>显示图片</title> </head> <body> <input type="file"> <script type="text/javascript"> var file_btn=document.querySelector("input"); file_btn.onchange=function() { var file=this.files[0]; //判断后缀名是否合法 var filename=file.name.substring(file.name.lastIndexOf(".")); var imgs=[".png",".jpg","gif",".ico"]; var flag=false; for(var i=0; i<imgs.length; i++) { if(imgs[i]==filename) { flag=true; break; } } if(flag) { var reader=new FileReader(); reader.readAsDataURL(file); reader.onload=function() { var img=document.createElement("img"); img.src=reader.result; document.body.appendChild(img); } }else { alert("文件类型不正确,请重新选择"); } } </script> </body> </html>
2 效果说明
点击上传对应正确格式的图片,会直接渲染在页面上,
每次只能上传一张图片,可以多次上传,图片不会被覆盖