如何用JavaScript的FileReader读取本地文件或Blob数据流？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1020个文字，预计阅读时间需要5分钟。
目录 + FileReader读取本地文件或blob + 一、FileReader的使用 + 二、FileReader的方法 + 三、FileReader的属性 + 四、FileReader的事件 + 五、使用FileReader读取本地磁盘文件 + FileReader读取本地文件或blob问题
目录
- FileReader读取本地文件或blob
- 一、FileReader的使用
- 二、FileReader的方法
- 三、FileReader的属性
- 四、FileReader的事件
- 使用FileReader读取本地磁盘文件问题
FileReader读取本地文件或blob
FileReader对象提供了异步读取存储在用户计算机上的文件的内容，使用 File或 Blob 对象指定要读取的文件或数据，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
一、FileReader的使用
注意：如果需要兼容低版本的浏览器，需要判断一下FileReader对象是否存在。
if (window.FileReader) { let reader = new FileReader(); } else { console.log('你的浏览器不支持读取文件'); }
二、FileReader的方法
result属性中返回data:URL格式的Base64字符串的文件内容
三、FileReader的属性
FileReader.error(只读)：一个异常，表示在读取文件时发生的错误FileReader.readyState(只读)：表示FileReader状态的数字
数据加载完毕
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替换为" "空格；问题解决
以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。
本文共计1020个文字，预计阅读时间需要5分钟。
目录 + FileReader读取本地文件或blob + 一、FileReader的使用 + 二、FileReader的方法 + 三、FileReader的属性 + 四、FileReader的事件 + 五、使用FileReader读取本地磁盘文件 + FileReader读取本地文件或blob问题
目录
- FileReader读取本地文件或blob
- 一、FileReader的使用
- 二、FileReader的方法
- 三、FileReader的属性
- 四、FileReader的事件
- 使用FileReader读取本地磁盘文件问题
FileReader读取本地文件或blob
FileReader对象提供了异步读取存储在用户计算机上的文件的内容，使用 File或 Blob 对象指定要读取的文件或数据，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
一、FileReader的使用
注意：如果需要兼容低版本的浏览器，需要判断一下FileReader对象是否存在。
if (window.FileReader) { let reader = new FileReader(); } else { console.log('你的浏览器不支持读取文件'); }
二、FileReader的方法
result属性中返回data:URL格式的Base64字符串的文件内容
三、FileReader的属性
FileReader.error(只读)：一个异常，表示在读取文件时发生的错误FileReader.readyState(只读)：表示FileReader状态的数字
数据加载完毕
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替换为" "空格；问题解决
以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。