HTML5读取本地文件　FileReader API接口

最新推荐文章于 2024-04-26 10:22:03 发布
最新推荐文章于 2024-04-26 10:22:03 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： js基础 日常

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

FileReader接口的方法
方法名参数描述
readAsBinaryStringfile将文件读取为二进制编码
readAsTextfile,[encoding]将文件读取为文本
readAsDataURLfile将文件读取为DataURL
abort(none)终端读取操作

 

 

 

 

 

 

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件
事件描述
onabort中断
onerror出错
onloadstart开始
onprogress正在读取
onload成功读取
onloadend读取完成，无论成功失败

 

 

 

 

 

 

 

 

3、FileReader接口的使用

1

2

3

4

5

6

//判断浏览器是否支持FileReader接口 

if(typeof FileReader == 'undefined'){ 

    result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>"; 

    //使选择控件不可操作 

    file.setAttribute("disabled","disabled"); 

} 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function readAsDataURL(){ 

    //检验是否为图像文件 

    var file = document.getElementById("file").files[0]; 

    if(!/image\/\w+/.test(file.type)){ 

        alert("看清楚，这个需要图片！"); 

        return false; 

    } 

    var reader = new FileReader(); 

    //将文件以Data URL形式读入页面 

    reader.readAsDataURL(file); 

    reader.onload=function(e){ 

        var result=document.getElementById("result"); 

        //显示文件 

        result.innerHTML='<img src="' + this.result +'" alt="" />'; 

    } 

} 

　　

1

2

3

4

5

6

7

8

9

10

11

function readAsBinaryString(){ 

    var file = document.getElementById("file").files[0]; 

    var reader = new FileReader(); 

    //将文件以二进制形式读入页面 

    reader.readAsBinaryString(file); 

    reader.onload=function(f){ 

        var result=document.getElementById("result"); 

        //显示文件 

        result.innerHTML=this.result; 

    } 

}

　　

1

2

3

4

5

6

7

8

9

10

11

function readAsText(){ 

    var file = document.getElementById("file").files[0]; 

    var reader = new FileReader(); 

    //将文件以文本形式读入页面 

    reader.readAsText(file); 

    reader.onload=function(f){ 

        var result=document.getElementById("result"); 

        //显示文件 

        result.innerHTML=this.result; 

    } 

}

　　

实例－－demo

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<!doctype html>

<html>

<head>

　　<title>文件上传</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">

</head>

<body>

 

 <script>

   function readLocalFile () {

        //alert("start...");

        var localFile = document.getElementById("uploadFile").files[0];

        //alert(uploadFile);

        //alert(localFile.name);

        //alert(localFile.type);

        //alert(localFile.size);

        var reader = new FileReader();

        //Uncaught SyntaxError:Unexpected identifier

        var content;

        reader.onload = function(event) {

            content = event.target.result;

            //alert(content);

             

            document.getElementById("img").src = content;

            document.getElementById("fileContent").value = content;

        }

        reader.onerror = function(event) {

         alert('error')

            //alert("File could not be read! Code " + event.target.error.code);

        }

        //reader.readAsText(localFile,"UTF-8");

         

        content = reader.readAsDataURL(localFile,"UTF-8");

        //

    }

 </script>

  

    <section>

        <input type="file" id="uploadFile" onchange="readLocalFile()";/>

        <div><img src="" id="img"/></div>

         

        <div><textarea id="fileContent" rows="30" cols="60"></textarea></div>

    </section>

     

</body>

</html>

　　

Djj_Alice
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 FileReader 读取txt文件
j_bleach的博客
12-11 3万+
JS读取本地txt 最近有从本地读取txt文件的需要，奈何网上搜索js读取本地txt，都是新建一个fso对象，即（FileSystemObject）。
利用html5 file api读取本地文件示例(如图片、PDF等)
09-28
本篇文章主要介绍了利用html5 file api读取本地文件示例(如图片、PDF等)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用FileReader接口读取文件内容
weixin_33843947的博客
01-12 2905
如果想要读取或浏览文件，则需要通过FileReader接口，该接口不仅可以读取图片文件，还可以读取文本或二进制文件，同时，根据该接口提供的事件与方法，可以动态侦察文件读取时的详细状态，接下来，我们详细介绍FileReader接口的使用方法。 FileReader 接口 FileReader 接口提供了一个异步的API，通过这个API可以从浏览器主线程中异步访问文件系统中的数据，基于此原因，Fi...
【JS】前端文件读取FileReader操作总结
最新发布
yqdid的博客
04-26 3251
开发中经常遇到文件上传的场景，有时需要前端将文件内容读取出来再以base64格式传到接口
html 获得file文本完整路径
weixin_40362806的博客
04-07 2614
html 获得file文本完整路径
HTML的路径
m0_74357768的博客
07-14 815
2.类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）2.类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到。2.类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你。1.绝对路径：指目录下的绝对位置，可直接到达目标位置，通常。2.类似于：我在大厅，你累了去卧室休息，我现在要找到你。3.同理：页面需要找到图片，也是需要路径才能找到。1.同级目录：当前文件和目标文件在同一目录中。1.上级目录：目标文件在上级目录中。1.下级目录：目标文件在下级目录中。出发找目标文件的过程。
读取txt中的接口
liangyan4428的博客
06-10 570
#! -*-coding:utf-8 -*- class sdf(): def lll(self,fff): method = {} with open("xxx/method_collection.txt","rb") as f: for i in f: temp = i.split(":".encode("utf-8")) method[temp[0].decode('u.
3种读写文件接口区别
Bloom and Grow
11-21 2248
fopen /open区别 UNIX环境下的C对二进制流文件的读写有两套班子：1) fopen,fread,fwrite ; 2) open, read, write 这里简单的介绍一下他们的区别。 其原型分别是 FILE *fopen(const char *filename,constchar *type); int open (const char *pathname, intfl
HTML5 实现一个访问本地文件的实例
09-28
本文将深入探讨如何使用HTML5的File API，特别是FileReader接口，来实现一个访问本地文件的实例。 FileReader是HTML5 File API的核心部分，它提供了异步读取文件数据的能力。通过FileReader，我们可以读取文件的...
JS+HTML5 FileReader实现文件上传前本地预览功能
12-10
HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并...
html5实现页面的显示本地图片
04-04
需要注意的是，为了安全原因，浏览器通常会对读取本地文件进行限制，不允许开发者直接访问文件系统。HTML5的File API提供了一种安全的方式，让用户自己选择需要共享的文件，而不会泄露其他敏感信息。 总的来说，...
H5 FileReader读取shp文件
06-19
FileReader API是HTML5提供的一种接口，用于读取Blob或File对象中的数据。它提供了多种读取方法，如readAsText、readAsDataURL和readAsArrayBuffer等，用于读取不同类型的数据。在读取过程中，可以监听`onload`、`on...
文件操作的主要接口API
休憩小站
07-06 1225
(1)文件描述符其实实质是一个数字，这个数字在一个进程中表示一个特定的含义，当我们open打开一个文件时，操作系统在内存中构建了一些数据结构来表示这个动态文件，然后返回给应用程序一个数字作为文件描述符，这个数字就和我们内存中维护这个动态文件的这些数据结构挂钩绑定上了，以后我们应用程序如果要操作这一个动态文件，只需要用这个文件描述符进行区分。 (2)一句话讲清楚文件描述符：文件描述符就是用来区分一个程序打开的多个文件的。 (3)文件描述符的作用域就是当前进程，出了当前进程这个文件描述符就没有意义了
利用接口请求获取文件
qq969887453的博客
09-02 1459
1、背景 爬架日报在上传图片文件时，测试阶段文件上传服务器为测试文件服务器，预览时根据id获取的测试服务器文件。 但发到线上后发现文件上传到了测试服务器，读取文件时又是从线上的文件服务器读取的。因此导致了文件显示异常。 2、数据恢复分析 先从测试环境获取到文件（这些文件实际为关键用户所上传的文件） （1）后端开发连接备份库，查询到所有相关的日报记录对应的文件id； （2）通过文件id拼接url下载文件，这里有两种思路 通过拼接url，利用浏览器访问接口，浏览器响应为图片文件通过selenium
html5 file api 读取本地文件
jdk137的专栏
01-04 1097
webdev-gadgets-readLocalFileread local file’s text content through html5 file apidemo<!DOCTYPE html> <html lang="en"> <head> <title>html5 file api.js</title> <meta charset="utf-8" /> <script src=
html5怎样写入文件,使用HTML5来实现本地文件读取和写入
weixin_42099151的博客
06-03 1726
最近有这样一个需求，就是在html页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析。说白了，就是一件事，就是如何读取或写入本地文件系统中的文件。这件事情在html5以前是一件非常恐怖的，因为浏览器对本地文件系统有非常强的保护，似乎是一种叫做沙盒的机制，总之是，js不可以直接操作它。所以，这个时候，要想读某个文件，...
利用html5读取本地文本文件及图片文件
热门推荐
cnds123的专栏
09-25 2万+
利用html5可以对本地的如文本、图片等文件读取操作，html5定义了一个file对象类型来表示文件，每个file对象对应一个文件。file对象有3个属性：name、size、type。name是不包含路径的文件名，size是以字节为单位的文件体积大小，type则是文件的MIME（例如image/jpg，关于MIME 参考手册 参见https://www.w3school.com.cn/media/media_mimeref.asp）。
html中调用接口
wan_zaiyunduan的博客
10-27 1万+
1.加载页面时直接调用方法函数，在函数中执行调用接口（不带参数） function f() { layui.use('element', function(){ var $ = layui.$; $.get("/interface/call", function (result) { console.log("=======&gt...
HTML初学入门基础1----------各种标签
涟涟的博客
12-08 688
一、使用工具 1.谷歌浏览器（其他浏览器也可） 2.取色器（Instant Eyedropper） 3.VSCode 二、新建项目 Ctrl+S保存 保存类型选为HTML类型 在开始页面打出英文! 按回车键 接下来我们就在body标签内写代码了 写完代码之后保存，然后我们找到你保存的html，使用浏览器打开，每保存一次，可以使用刷新看最新的成果 注： ...
javascrip读取excel文件使用HTML5 FileReader API
05-27
要使用HTML5 FileReader API读取Excel文件，可以使用以下步骤： 1. 在HTML页面中添加一个文件上传控件，例如： ```html <input type="file" id="fileInput" /> ``` 2. 使用JavaScript获取文件上传控件，并添加一个`change`事件监听器来获取用户选择的文件： ```javascript const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', handleFileSelect, false); function handleFileSelect(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = handleFileLoad; reader.readAsBinaryString(file); } ``` 在这个示例中，我们获取了文件上传控件元素，并为其添加了一个`change`事件监听器。当用户选择了一个文件时，事件监听器会调用`handleFileSelect`函数来处理文件。 3. 在`handleFileSelect`函数中，我们创建了一个`FileReader`对象，并使用`readAsBinaryString`方法将文件读入内存： ```javascript function handleFileSelect(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = handleFileLoad; reader.readAsBinaryString(file); } ``` 注意，我们使用了`readAsBinaryString`方法来读取二进制数据，因为Excel文件是二进制文件。 4. 一旦文件被读入内存，`FileReader`对象的`onload`事件将会被触发。我们可以在事件处理函数中访问文件的二进制数据： ```javascript function handleFileLoad(event) { const data = event.target.result; const workbook = XLSX.read(data, { type: 'binary' }); const sheetName = workbook.SheetNames[0]; const sheet = workbook.Sheets[sheetName]; const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 }); console.log(jsonData); } ``` 在这个示例中，我们使用`XLSX.read`方法来将二进制数据转换成一个`Workbook`对象。然后，我们选择要读取的工作表，并将其转换成JSON格式的数据。最后，我们将数据打印到控制台上。 需要注意的是，这个示例代码只是一个简单的例子。在实际应用中，你可能需要处理更复杂的Excel文件，例如包含多个工作表或带有复杂格式的表格。你需要根据具体情况进行相应的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值