js利用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的方法
| 方法 | 作用 | 参数 | 返回值 |
| 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替换为" "空格；问题解决
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
js如何获取图片url的Blob值并预览示例代码
前言 Blob 对象表示一个不可变.原始数据的类文件对象.Blob 表示的不一定是JavaScript原生格式的数据.File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件. 本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容,下面话不多说了,来一起看看详细的介绍吧 方法如下 1)使用 XMLHttpRequest 对象获取图片url的Blob值 //获取图片的Blob值 function getImageBlob(url, cb) { var
-
利用Blob进行文件上传的完整步骤
Blob Blob,Binary Large Object的缩写,二进制类型的大对象,代表不可改变的原始数据 在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型. Blob基本用法 Blob对象 Blob对象指的是字节序列,并且具有size属性,是字节序列中的字节总数,和一个type属性,它是小写的ASCII编码的字符串表示的媒体类型字节序列. size:以字节数返回字节序列的大小.获取时,符合要求的用户代理必须返回一个FileReader或一个FileReaderSync对象可以读
-
js中关于Blob对象的介绍与使用
blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象,里面可以储存大量的二进制编码格式的数据. 创建blob对象 创建blob对象本质上和创建一个其他对象的方式是一样的,都是使用Blob() 的构造函数来进行创建. 构造函数接受两个参数: 第一个参数为一个数据序列,可以是任意格式的值. 第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决
-
基于JavaScript FileReader上传图片显示本地链接
简介 使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个<input type="text" />元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果. 页面中多个,上传
-
js利用FileReader读取本地文件或者blob方式
目录 FileReader读取本地文件或blob 一.FileReader的使用 二.FileReader的方法 三.FileReader的属性 四.FileReader的事件 使用FileReader读取本地磁盘文件问题 FileReader读取本地文件或blob FileReader对象提供了异步读取存储在用户计算机上的文件的内容,使用 File或 Blob 对象指定要读取的文件或数据,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. 一.FileReader的使用 注
-
php读取本地文件常用函数(fopen与file_get_contents)
下面我们以.txt文件为实例来介绍php读取本地文件的函数,读取文件我们可以利用fopen或file_get_contents来读取,file_get_contents更简单而fopen需要fread配合才可以显示读出的内容. 1.首先来介绍一下fopen()函数 下面我们给出了一个直接打开本地文件的代码demo,必要的地方我们都已经加上了注释: 复制代码 代码如下: //直接打开一个本地文件的实例代码 <?php //假若我们本地的文件是一个名为xmlas.txt的文本
-
java利用SMB读取远程文件的方法
本文实例为大家分享了java利用SMB读取远程文件的具体代码,供大家参考,具体内容如下 package com.yss.test.FileReadWriter; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import jav
-
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
本文实例讲述了纯JS实现的读取excel文件内容功能.分享给大家供大家参考,具体如下: template.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JS-XLSX Live Demo</title> <link href="../css/boots
-
使用BufferedReader读取本地文件的操作
BufferedReader读取本地文件 在使用BufferedWriter写入文件时,如果忘记关闭文件(close)同时也没有调用flush(),则被写入的文件中是没有内容的. 在关闭文件的同时系统会自动调用flush() try { File file=new File("c://aa.txt"); FileInputStream is=new FileInputStream(file); InputStreamReader reader=new InputStreamReader
-
js使用xlsx读取excel文件的详细步骤
目录 下载安装插件 文件基础 获取文件对象 读取文件数据 读取Excel 通过xlsx获取workbook WorkBook介绍 读取WorkBook 导出Excel 生成sheet 总结 下载安装插件 npm install xlsx or yarn add xlsx 此时,在项目的node_modules文件夹和package.json文件中可以找到xlsx依赖. 文件基础 获取文件对象 我比较推荐使用h5的原生文件上传项 <input type="file" id=&quo
-
详解Java读取本地文件并显示在JSP文件中
详解Java读取本地文件并显示在JSP文件中 当我们初学IMG标签时,我们知道通过设置img标签的src属性,能够在页面中显示想要展示的图片.其中src的值,可以是磁盘目录上的绝对,也可以是项目下的相对路径,还可以是网络上的图片路径.在存取少量图片的情况下,采用相对路径存储图片的情况下最方便,也最实用.但是当图片数量过多时,这种方式就显的有些掣肘了. 当系统的图片数量过多时,如果仍把这些图片当做项目的一部分去发布,势必会大大延长项目的发布时间及更新时间.对于某些对于时限性要求特别高的系统来说,采
-
JS与jQ读取xml文件的方法
废话不多说了,直接给大家贴代码了,具体代码如下所示: jquery读取xml文件 <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <
-
java 读取本地文件实例详解
java 读取本地文件实例详解 用javax.xml.w3c解析 实例代码: package cn.com.xinli.monitor.utils; import org.w3c.dom.Document; import org.w3c.dom.Element; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import java.io.File; /** *
-
Python读取本地文件并解析网页元素的方法
如下所示: from bs4 import BeautifulSoup path = './web/new_index.html' with open(path, 'r') as f: Soup = BeautifulSoup(f.read(), 'lxml') titles = Soup.select('ul > li > div.article-info > h3 > a') for title in titles: print(title.text) 输出: Sardinia