简单来说,上传问价加读取文件分为三步:
1、上传我们的文件,借助于文件域的input
2、选择要上传的文件,进行读取
3、把读取的内容显示到页面中
首先对页面进行一下布局:
在页面上创建一个input和div,div是用来存储显示上传的文件的
<input type="file">
<div></div>
此时页面上面只有一个选择文件的按钮
接下来放上传的代码:
<script>
//1、上传我们的文件,借助于文件域 input file
var file=document.querySelector("input")
var div=document.querySelector("div")
// 当页面发生改变的时候,比如上传图片了
//是一个集合对象,通过files就能找出我们上传的那个文件了(伪数组)
file.onchange=function(){
//不管是上传的什么文件都唱传到了this.files里面去了
// console.log(this.files)
//2、选择要的文件,进行读取fileReader文件里面的内容
// 因为filereader是一个对象得提前new
var reader=new FileReader()
//rader.raderAsText(文件对象)
// 读取this.files【0】文件里面的内容
reader.readAsText(this.files[0])
//3、把读取的内容显示到页面中
//reader已经读取完毕了,而且读取的内容存放到了resuly里面
reader.onload=function(){
div.innerHTML=this.result
}
}
</script>
此时,我们往页面上传一个记事本
页面上就立马显示出来记事本的内容啦~:
而且我们不仅可以显示出文字,因为Filereader对象包含了五个对象,我只是用了其中的一个,如果像读取别的的话,直接更改一下就好啦~
readAsBinaryString 将文件数据读取为二进制数据字符串
readAsText 将文件数据读取为文本数据
readAsDataURL 图像路径
readArrayBuffer
abort 中断