HTML5 FileReader读取file内容

最新推荐文章于 2024-05-04 01:19:53 发布
最新推荐文章于 2024-05-04 01:19:53 发布
阅读量1.3k 收藏
点赞数

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    
 
    <script type="text/javascript">  
    var result=document.getElementById("result");  
    var file=document.getElementById("file");  
      
    //判断浏览器是否支持FileReader接口  
    if(typeof FileReader == 'undefined'){  
        result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";  
        //使选择控件不可操作  
        file.setAttribute("disabled","disabled");  
    }  
      
    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.οnlοad=function(e){  
            var result=document.getElementById("result");  
            //显示文件  
            result.innerHTML='<img src="' + this.result +'" alt="" />';  
        }  
    }  
      
    function readAsBinaryString(){  
        var file = document.getElementById("file").files[0];  
        var reader = new FileReader();  
        //将文件以二进制形式读入页面  
        reader.readAsBinaryString(file);  
        reader.οnlοad=function(f){  
            var result=document.getElementById("result");  
            //显示文件  
            result.innerHTML=this.result;  
        }  
    }  
      
    function readAsText(){  
        var file = document.getElementById("file").files[0];  
        var reader = new FileReader();  
        //将文件以文本形式读入页面  
        reader.readAsText(file);  
        reader.οnlοad=function(f){  
            var result=document.getElementById("result");  
            //显示文件  
            result.innerHTML=this.result;  
        }  
    }  
    </script>  
    <p>  
        <label>请选择一个文件：</label>  
        <!-- onchange在file选好图片之后会进行回调 -->
        <input type="file" id="file" οnchange='readAsDataURL()'/>  
        <input type="button" value="读取图像" οnclick="readAsDataURL()" />  
        <input type="button" value="读取二进制数据" οnclick="readAsBinaryString()" />  
        <input type="button" value="读取文本文件" οnclick="readAsText()" />  
    </p>  
    <div id="result" name="result"></div>  
 
</body>
</html>

qq_26345737
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 FileReader 读取txt文件
j_bleach的博客
12-11 3万+
JS读取本地txt 最近有从本地读取txt文件的需要，奈何网上搜索js读取本地txt，都是新建一个fso对象，即（FileSystemObject）。
html5 filereader读取txt文件
啊哈前端的专栏
05-03 1835
var readTxt = (function(w) { //常量 var __DEFAULT__ = { exp: { trim: /\s/, //匹配空格 rn: /\r\n/g //匹配换行 }, errorMsg: { readError: "读取文件出错！", interruptError: "读取文件异常中断！" } }; //保存...
js 获取文件对象var fileObj = document.getElementsByName("blobupFile")[0].files[0];
qq_34169240的博客
06-28 1万+
easyUI中上传文件的easyui-filebox：（class="easyui-filebox"）&lt;input id="Document_filePath" class="easyui-filebox" name="blobupFile" data-options="buttonText:'选择文件',method: 'post',required:true" style="wi
使用 FileReader进行文件读取
zyf971020的博客
11-03 7623
使用 FileReader进行文件读取
网站开发进阶(三十二)HTML5之FileReader的使用_html5 filereader
最新发布
2401_84418883的博客
05-04 16
不难发现这个检测是基于正则表达式的，因此可以进行各种复杂的匹配，非常有用。如果要限定上传文件的类型，可以通过文件选择器获取文件对象并通过。如果要增加一个进度条，可以使用。标签，通过下面的代码实现。属性来检查文件类型。
JavaScript专精系列(6)——FileReader 文件读取
mapbar_front的博客
11-25 8870
FileReader是前端进行文件处理的一个重要的Api，特别是在对图片的处理上，如果你想知道图片的处理原理，你就永远不可能绕过它。 文件处理是一系列的流程，每一步我们都需要知道，自己能做什么，自己做了什么。 第一步，获取文件前端中，获取文件必须使用input标签。<input id='file' type='file' />
FileReader读取文件
weixin_52398973的博客
03-15 1320
基于该对象，我们可以实现对选中的读取操作fileReader读取的文件需要从input中获取let file = this.files[0] // 就是我们选中的文件fileReader.readAsDataURL(file) // 读是一个异步操作。需要在fileReader的onload事件中获取对应的结果给fileReader绑定onload事件// this.result 就是我们的读取的结果 是一个base64。
Js的FileReader读取文件内容（async/await）
ljp654的博客
04-13 5709
filereader和async/await花式使用
HTML5 FileReader接口学习笔记
06-20
下面是一个简单的HTML5文件读取示例，展示了如何使用FileReader读取不同类型的文件内容： ```html <input type="file" id="file_reader"> 读取图像" onclick="readAsDataUrl();"> 读取二进制数据" onclick=...
利用html5 file api读取本地文件示例(如图片、PDF等)
09-28
读取`File`对象，HTML5提供了`FileReader`接口。创建`FileReader`实例后，可以使用`readAsDataURL`方法读取文件内容为Base64编码的数据URL，适用于显示图片；或者使用`readAsText`读取文本文件内容。读取过程是异步...
Html5 FileReader实现即时上传图片功能实例代码
09-28
HTML5的FileReader接口是现代Web开发中的一个重要工具，它允许网页直接读取用户设备上的文件，无需服务器的介入。这对于实现即时预览和上传图片等功能非常有用。以下是一个简单的实现示例： 首先，我们需要创建一个...
HTML5中FileReader接口使用方法实例详解
12-13
FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。 1、FileReader接口的方法 FileReader接口有4个...
JS+HTML5 FileReader对象用法示例
01-21
本文实例讲述了JS+HTML5 FileReader对象用法。分享给大家供大家参考，具体如下： FileReader 实例中有四个方法来读取文件数据 1、readAsBinaryString(Blob|File) 2、readAsDataURL(Blob|File) 3、readAsText(Blob|...
HTML5之文件操作全过程（FileReader）
yiyueqinghui的博客
03-03 1934
第一步，获取文件 前端中，获取文件必须使用input标签。而获取到这个文件，必须要用代码的方式，体现出来，让你能用代码操作它。这里主要是使用input标签的onchange事件。 <input id='file' type='file' /> var file = document.getELementById('file'); file.onchange = function(e)...
文件读取---FileReader
perliu的专栏
07-07 505
操作，是因为最后一次读取的时候可能剩下的文件内容不够1024个字符了，这个时候就要按照读取到的字符数量从数组中截取内容，否则数组中后续其他内容是上次读取的字符数据，没必要再重复处理了。读取文件内容，而且是按照字符读取，一个字母算一个字符，一个汉字也算一个字符，但是回车是一个字符，换行是一个字符，\r\n(回车换行)是会被读成两个字符的。这是按照字符处理，如果读取的文件不是文本文件，例如图片、视频、zip等等，那就要按照字节读取，FileReader： 臣妾做不到啊！
Java - FileRader读文件
m0_53753920的博客
04-15 892
FileReader类从InputStreamReader类继承而来。该类按字符读取流中数据。可以通过以下几种构造方法创建需要的对象。在给定从中读取数据的 File 的情况下创建一个新 FileReader。以下我们将实现使用filereader读取文件。
FileReader()读取文件、图片上传预览
油墨香^-^的博客
02-16 2244
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个htmlCanvasElement上执行mozGetAsFile()方法后返回结果。
HTML5 用FileReader对象读取文本
Hillbox
08-14 631
FileReader对象可以用来读取File对象所包含的文件内容。
FileReader读取文件的三种方式
热门推荐
s77的博客
02-04 5万+
#日常练习 FileReader可以通过一次读取文件中一个字符，一次读取一个字符数组或使用缓冲区这三种方式来读取文件 备注：使用缓冲区的方式的内部实现是借助数组完成 package IO; import java.io.BufferedReader; import java.io.FileReader; import java.io.IOException; public class F
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、付费专栏及课程。

余额充值