耀极客论坛

 找回密码
 立即注册
查看: 3532|回复: 0

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

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 02:26:26 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了js利用FileReader读取本地文件或者blob方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

一、FileReader的使用
  注意:如果需要兼容低版本的浏览器,需要判断一下FileReader对象是否存在。
  1. if (window.FileReader) {
  2. let reader = new FileReader();
  3. } else {
  4. console.log('你的浏览器不支持读取文件');
  5. }
复制代码
二、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中使用。
  1. ‹!DOCTYPE html>
  2. ‹html class="no-js">
  3. ‹head>
  4. ‹meta charset="utf-8" />
  5. ‹meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. ‹title>‹/title>
  7. ‹meta name="description" content="" />
  8. ‹meta name="viewport" content="width=device-width, initial-scale=1" />
  9. ‹link rel="stylesheet" href="" />
  10. ‹/head>
  11. ‹body>
  12. ‹input type="file" id="myFile" />
  13. ‹script type="text/javascript">
  14. if (window.FileReader) {
  15. var reader = new FileReader();
  16. } else {
  17. console.log('你的浏览器不支持读取文件');
  18. }
  19. var myFile = document.querySelector('#myFile');
  20. myFile.onchange = function () {
  21. var file = myFile.files[0];
  22. reader.readAsDataURL(file);
  23. reader.onload = function () {
  24. var data = reader.result;   //base64形式的文件内容
  25. };
  26.                 reader.onerror = function(){
  27.                     console.log('读取失败');
  28.                     console.log(reader.error);
  29.                 }
  30. };
  31. ‹/script>
  32. ‹/body>
  33. ‹/html>
复制代码
使用FileReader读取本地磁盘文件问题
  执行一个js文件 (将js文件置于项目的src下)
  1. (1) java.net.URL url = TestScriptEngine.class.getClassLoader().getResource("a.js");
  2. (2)//System.out.println(url.getPath().substring(1).replace("%20", " "));
  3. (3)FileReader fileReader = new FileReader(url.getPath());
复制代码
  运行时
  1. 出现: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替换为" "空格;问题解决
  以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:59 , Processed in 0.073108 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表