• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js利用FileReader读取本地文件或者blob方式

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

FileReader读取本地文件或blob

FileReader对象提供了异步读取存储在用户计算机上的文件的内容,使用 File或 Blob 对象指定要读取的文件或数据,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

一、FileReader的使用

注意:如果需要兼容低版本的浏览器,需要判断一下FileReader对象是否存在。

if (window.FileReader) {
 let reader = new FileReader();
} else {
 console.log('你的浏览器不支持读取文件');
}

二、FileReader的方法

方法 作用 参数 返回值
abort() 中止读取操作 none none
readAsArrayBuffer() 读取file和Blob内容 file/blob result属性中返回ArrayBuffer数据对象的文件内容
readAsBinaryString()[已被W3废弃] 读取file和Blob内容 file/blob result属性中返回原始二进制数据的文件内容
readAsDataURL() 读取file和Blob内容 file/blob

result属性中返回data:URL格式的Base64字符串的文件内容

readAsText() 读取file和Blob内容 file/blob result属性中返回一个字符串的文件内容

三、FileReader的属性

  • FileReader.error(只读):一个异常,表示在读取文件时发生的错误
  • FileReader.readyState(只读):表示FileReader状态的数字
状态名 描述
0 EMPTY 未加载任何数据
1 LOADING 数据加载中
2 DONE

数据加载完毕

  • FileReader.result(只读):读取完文件的内容,该属性在数据读取完成之后才有效,文件内容的格式是由读取的方法所决定。

四、FileReader的事件

  • FileReader.onabort:该事件是中止读取的时候触发。
  • FileReader.onerror:该事件是读取发生错误的时候触发。
  • FileReader.onload:该事件是读取完成的时候触发。
  • FileReader.onloadstart:该事件是读取操作刚开始的时候触发。
  • FileReader.onloadend:该事件是读取结束的时候触发(失败和成功的时候都会触发)。
  • FileReader.onprogress:该事件在读取的时候触发。

注意:

1、由于安全性原因,FileReader读取的是由input传入的文件或者是由ajax读取服务端返回的文件,不可以是指定路径的文件的读取。

2、FileReader可以在webworker中使用。

<!DOCTYPE html>
<html class="no-js">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title></title>
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="" />
	</head>
 
	<body>
		<input type="file" id="myFile" />
		<script type="text/javascript">
			if (window.FileReader) {
				var reader = new FileReader();
			} else {
				console.log('你的浏览器不支持读取文件');
			}
			var myFile = document.querySelector('#myFile');
			myFile.onchange = function () {
				var file = myFile.files[0];
				reader.readAsDataURL(file);
				reader.onload = function () {
					var data = reader.result;   //base64形式的文件内容
				};
                reader.onerror = function(){
                    console.log('读取失败');
                    console.log(reader.error);
                }
			};
		</script>
	</body>
</html>

使用FileReader读取本地磁盘文件问题

执行一个js文件 (将js文件置于项目的src下)

(1) java.net.URL url = TestScriptEngine.class.getClassLoader().getResource("a.js");
(2)//System.out.println(url.getPath().substring(1).replace("%20", " "));
(3)FileReader fileReader = new FileReader(url.getPath());

运行时

出现:Exception in thread "main" java.io.FileNotFoundException: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js (The system cannot find the path specified)

若把url.getPath()换成"D:/Eclipse WorkSpace/(java300)ScriptManager/bin/a.js"我的本地文件目录,则可以成功读取文件

url.getPath()的值为: D:\Eclipse%20WorkSpace\(java300)ScriptManager\bin\a.js 但是不能找到加载文件

问题就出现在“%20” ,Eclipse WorkSpace之间本来是空格,系统自动将其换为%20,导致运行是出错

对url.getPath()作一些处理,把url.getPath().substring(1).replace("%20", " "); 把%20替换为" "空格;问题解决

以上为个人经验,希望能给大家一个参考,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用JS操作文件(FileReader读取--node的fs)发布时间:2022-02-05
下一篇:
使用fileReader的一个坑及解决发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap