本文主要介绍js使用FileReader读取本地文件或blob的方式,有很好的参考价值。希望对大家有帮助。如有错误或不足之处,请不吝赐教。
目录
FileReader读取本地文件或blob。1.使用FileReader。2.FileReader的方法。4.FileReader的事件。用FileReader读取本地磁盘文件
FileReader读取本地文件或blob
FileReader对象提供对存储在用户计算机上的文件内容的异步读取,并使用file或Blob对象指定要读取的文件或数据。FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
一、FileReader的使用注意:如果需要兼容旧版浏览器,需要判断FileReader对象是否存在。
如果(窗口。FileReader) {
let reader=new FileReader();
}否则{
Console.log(您的浏览器不支持读取文件);
}
二、FileReader的方法方法
功能
参数
返回值
中止()
中止读取操作。
没有人
没有人
readAsArrayBuffer()
读取文件和Blob内容
文件/blob
result属性返回ArrayBuffer数据对象的文件内容。
readbinarystring()[已被W3废弃]
读取文件和Blob内容
文件/blob
result属性返回原始二进制数据的文件内容。
readAsDataURL()
读取文件和Blob内容
文件/blob
result属性以data:URL格式返回Base64字符串的文件内容。
readAsText()
读取文件和Blob内容
文件/blob
result属性返回字符串的文件内容。
三、FileReader的属性FileReader.error(只读):一个异常,指示读取文件时出现错误。
FileReader.readyState(只读):一个指示FileReader状态的数字。
价值
州名
形容
0
空的
未加载任何数据。
一个
装货
加载数据
2
完成的
数据已加载。
FileReader.result(只读):在读取文件内容之后,这个属性在数据被读取之前是无效的。文件内容的格式由读取方法决定。
四、FileReader的事件FileReader.onabort:当读取中止时触发该事件。
FileReader.onerror:当读取出现错误时会触发此事件。
FileReader.onload:当读取完成时触发该事件。
FileReader.onloadstart:当读取操作刚刚开始时触发该事件。
FileReader.onloadend:读取结束时触发该事件(失败或成功时都会触发)。
FileReader.onprogress:读取时触发此事件。
注意:
1.由于安全原因,FileReader读取input传入或ajax reading server返回的文件,无法读取指定路径的文件。
2.FileReader可以在webworker中使用。
!文档类型html
html class=no-js
头
meta charset=utf-8 /
meta http-equiv= X-UA-Compatible content= IE=edge /
标题/标题
meta name= description content= /
meta name= viewport content= width=device-width,initial-scale=1 /
link rel=stylesheet href= /
/头
身体
输入类型=file id=myFile /
脚本类型=文本/javascript
如果(窗口。FileReader) {
var reader=new FileReader();
}否则{
Console.log(您的浏览器不支持读取文件);
}
var my file=document . query selector(" # my file ");
myFile.onchange=function () {
var file=my file . files[0];
reader.readAsDataURL(文件);
reader.onload=function () {
var data=reader.result//base64格式的文件内容
};
reader.onerror=function(){
console.log(读取失败);
控制台。日志(读者。错误);
}
};
/脚本
/body
/html
使用FileReader读取本地磁盘文件问题
执行一个射流研究…文件(将射流研究…文件置于项目的科学研究委员会下)
(1)Java。网。URL URL=testscript引擎。班级。getclass loader().获取资源( a . js );
(2)//系统。出去。println(网址。getpath().子字符串(1)。替换(, ));
(3)FileReader FileReader=新文件读取器(URL。getpath());
运行时
出现:线程"主要"中出现异常Java。io。找不到文件异常:D: Eclipse WorkSpace (Java 300)脚本管理器 bin a . js(系统找不到指定的路径)
若把url.getPath()换成d:/Eclipse WorkSpace/(Java 300)脚本管理器/bin/a . js 我的本地文件目录,则可以成功读取文件
url.getPath()的值为:D: Eclipse WorkSpace (Java 300)脚本管理器 bin a . js但是不能找到加载文件
问题就出现在“”,月食工作区之间本来是空格,系统自动将其换为,导致运行是出错
对url.getPath()作一些处理,把url.getPath().子字符串(1)。替换( , );把替换为 空格;问题解决
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。