H5新增内容
2017-07-17 本文已影响14人
哼_
FIleReader文件读取API###
input 给input标签添加multiple属性,就可以选择多个文件
file对象####
lastModified:1496884474143 //(毫秒)
lastModifiedDate:Thu Jun 08 2017 09:14:34 GMT+0800 (中国标准时间)
name:"js初级回顾.txt" //文件名
size:0 //文件大小
type:"text/plain" //文件类型```
####FileReader使用方式:####
1.构建FileReader实例
2.选择要是用的读取方式,如 readAsDataURl() 将文件对象传递给该方法
3,监听读取完成的事件 onload ,通过 this.result 得到读取结果
4,其他事件监听
####读取方式####
fr.readAsDataURL(files);//接收参数是文件对象
fr.readAsText(files); 以文本方式读取选中文件
fr.readAsBinaryString(files); 以二进制的方式读取文件
####input事件####
onload 读取完成
onloadstart 开始读取
onloaddend 结束读取 无论成功失败都会触发
onerror 错误触发
onabort 中断读取时触发
abort() 中断读取
<body>
<input type="file" name="" id="myFile" multiple>
</body>
<script type="text/javascript">
var input=document.querySelector("#myFile");
input.onchange = function(){
console.log(this.files); //FileList {0: File, length: 1}
for(var i=0;i<this.files.length;i++){
var files = this.files[i];
console.log(files);
var fr = new FileReader(); //使用FileReader来读取文件
//fr.readAsDataURL(files); //读取文件地址 base64格式
fr.readAsText(files); //以文本格式读取文件
//fr.readAsBinaryString(files); //以二进制格式读取
fr.onload = function(){
console.log(this.result);
var img = new Image();
img.src = this.result;
document.body.appendChild(img);
//将选中的img显示在网页上.
}
}
}
</script>
