filereader_filereader未定义 - CSDN
精华内容
参与话题
  • FileReader读取文件的三种方式

    万次阅读 2018-02-06 22:07:53
    FileReader可以通过一次读取文件中一个字符,一次读取一个字符数组或使用缓冲区这三种方式来读取文件 备注:使用缓冲区的方式的内部实现是借助数组完成 package IO; import java.io.BufferedReader; import java....

    #日常练习

    FileReader可以通过一次读取文件中一个字符,一次读取一个字符数组或使用缓冲区这三种方式来读取文件

    备注:使用缓冲区的方式的内部实现是借助数组完成

    package IO;
    
    import java.io.BufferedReader;
    import java.io.FileReader;
    import java.io.IOException;
    
    public class FileReaderDemo {
    
    	public static void main(String[] args) {
    		// 读取文件的方式一:逐个字符来读取文本文件
    		FileReader fr = null;
    		try {
    			fr = new FileReader("Demo.txt");
    
    			int ch = fr.read();
    			while (ch != -1) {
    				System.out.print((char) ch);
    				ch = fr.read();
    			}
    			System.out.println();
    		} catch (IOException e) {
    			System.out.println("异常:" + e.toString());
    		} finally {
    			try {
    				if (fr != null)
    					fr.close();
    			} catch (IOException e) {
    				System.out.println("异常:" + e.toString());
    			}
    		}
    		
    		//读取文件方式二:使用数组来读取文本文件
    		FileReader fr1 = null;
    		try {
    			fr1 = new FileReader("Demo.txt");
    			char [] buf = new char[1024];
    			int num = 0;
    			while((num = fr1.read(buf))!=-1) {
    				System.out.println(new String(buf,0,num));
    			}
    		}catch(IOException e) {
    			System.out.println("异常:" + e.toString());
    		}finally {
    			try {
    			if(fr1!=null)
    			fr1.close();
    			}catch(IOException e) {
    				System.out.println("异常:" + e.toString());
    			}
    		}
    		
    		//方法三:用缓冲区读取文本文件
    		//通过查源码得知方法三内部实现时是使用数组形式来缓冲字符数据的
    		FileReader fr2 = null;
    		BufferedReader bufr = null;
    		try {
    			fr2 = new FileReader("Demo.txt");
    			bufr = new BufferedReader(fr2);
    			String line = null;
    			//BufferedReader提供了按行读取文本文件的方法readLine()
    			//readLine()返回行有效数据,不包含换行符,未读取到数据返回null
    			while((line = bufr.readLine())!=null) {
    				System.out.println(line);	
    			}
    		}catch(IOException e) {
    			System.out.println("异常:" + e.toString());
    		}finally {
    			try {
    			if(bufr!=null)
    			bufr.close();
    			}catch(IOException e) {
    				System.out.println("异常:" + e.toString());
    			}
    		}
    	}
    
    }
    
    2018/02/06晚修改:添加FileReader读取文件的第三种方式。



    展开全文
  • js中FileReader()用法

    万次阅读 2020-04-02 10:22:40
    版权声明:本文为博主原创文章,请在转载时说明出处。 https://blog.csdn.net/jackfrued/article/details/8967667 </div> <link rel="stylesheet" h...
    				版权声明:本文为博主原创文章,请在转载时说明出处。					https://blog.csdn.net/jackfrued/article/details/8967667				</div>
    							            <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css">
    					<div class="htmledit_views" id="content_views">
    

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。


    FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:

    1.检测浏览器对FileReader的支持

    if(window.FileReader) {
        var fr = new FileReader();
        // add your code here
    }
    else {
        alert("Not supported by your browser!");
    }
    

    2. 调用FileReader对象的方法

    FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result属性中。

    方法名 参数 描述
    abort none 中断读取
    readAsBinaryString file 将文件读取为二进制码
    readAsDataURL file 将文件读取为 DataURL
    readAsText file, [encoding] 将文件读取为文本

    readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
    readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
    readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。


    3. 处理事件

    FileReader 包含了一套完整的事件模型,用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

    事件 描述
    onabort 中断时触发
    onerror 出错时触发
    onload 文件读取成功完成时触发
    onloadend 读取完成触发,无论成功或失败
    onloadstart 读取开始时触发
    onprogress 读取中

    文件一旦开始读取,无论成功或失败,实例的 result 属性都会被填充。如果读取失败,则 result 的值为 null ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

    fr.onload = function() {
        this.result;
    }
    


    下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。

    `
    <script type="text/javascript">
    		function showPreview(source) {
    			var file = source.files[0];
    			if(window.FileReader) {
    				var fr = new FileReader();
    				fr.onloadend = function(e) {
    					document.getElementById("portrait").src = e.target.result;
    				};
    				fr.readAsDataURL(file);
    			}
    		}
    	</script>
     
    <input type="file" name="file" onchange="showPreview(this)" />
    <img id="portrait" src="" width="70" height="75">
    

    `

    如果要限定上传文件的类型,可以通过文件选择器获取文件对象并通过type属性来检查文件类型

    if(!/image\/\w+/.test(file.type)){
        alert("请确保文件为图像类型");
        return false;
    }
    

    不难发现这个检测是基于正则表达式的,因此可以进行各种复杂的匹配,非常有用。

    如果要增加一个进度条,可以使用HTML 5的progress标签,通过下面的代码实现。

    <form>
        <fieldset>
            <legend>分度读取文件:</legend>
            <input type="file" id="File" />
            <input type="button" value="中断" id="Abort" />
            <p>
                <label>读取进度:</label><progress id="Progress" value="0" max="100"></progress>
            </p>
            <p id="Status"></p>
        </fieldset>
    </form>
    

    var h = {
        init: function() {
            var me = this;
             
            document.getElementById('File').onchange = me.fileHandler;
            document.getElementById('Abort').onclick = me.abortHandler;
             
            me.status = document.getElementById('Status');
            me.progress = document.getElementById('Progress');
            me.percent = document.getElementById('Percent');
             
            me.loaded = 0;
            //每次读取1M
            me.step = 1024 * 1024;
            me.times = 0;
        },
        fileHandler: function(e) {
            var me = h;
             
            var file = me.file = this.files[0];
             
            var reader = me.reader = new FileReader();
             
            //
            me.total = file.size;
             
            reader.onloadstart = me.onLoadStart;
            reader.onprogress = me.onProgress;
            reader.onabort = me.onAbort;
            reader.onerror = me.onerror;
            reader.onload = me.onLoad;
            reader.onloadend = me.onLoadEnd;
            //读取第一块
            me.readBlob(file, 0);
        },
        onLoadStart: function() {
            var me = h;
        },
        onProgress: function(e) {
            var me = h;
             
            me.loaded += e.loaded;
            //更新进度条
            me.progress.value = (me.loaded / me.total) * 100;
        },
        onAbort: function() {
            var me = h;
        },
        onError: function() {
            var me = h;
             
        },
        onLoad: function() {
            var me = h;
     
            if(me.loaded < me.total) {
                me.readBlob(me.loaded);
            } else {
                me.loaded = me.total;
            }
        },
        onLoadEnd: function() {
            var me = h;
             
        },
        readBlob: function(start) {
            var me = h;
             
            var blob,
                file = me.file;
             
            me.times += 1;
             
            if(file.webkitSlice) {
                blob = file.webkitSlice(start, start + me.step + 1);
            } else if(file.mozSlice) {
                blob = file.mozSlice(start, start + me.step + 1);
            }
             
            me.reader.readAsText(blob);
        },
        abortHandler: function() {
            var me = h;
             
            if(me.reader) {
                me.reader.abort();
            }
        }
    };
     
    h.init();
    



    展开全文
  • FileReader简介

    千次阅读 2019-06-13 15:46:12
    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件。
    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件。

    input:file

    在介绍FileReader之前,先简单介绍input的file类型。

    <input type="file" id="file">
    

    input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名);file类型的input会有files属性,保存着文件的相关信息。

    document.querySelector('#file').addEventListener('change',(fileChoosed) => {
        console.log('fileChoosed', fileChoosed.target.files)    
    })
    

    点击按钮上传一个文件后,在控制台打印上传的文件信息,如下:

    可以发现文件信息是一个json对象,由传入的file对象组成。每个file对象(即每个上传文件)包含以下属性:

    lastModified:数值,表示最近一次修改时间的毫秒数;
    lastModifiedDate:对象,表示最近一次修改时间的Date对象;
    name:本地文件系统中的文件名;
    size:文件的字节大小;
    type:字符串,文件的MIME类型;

    webkitRelativePath:此处为空;当在input上加上webkitdirectory属性时,用户可选择文件夹,此时webkitRelativePath表示文件夹中文件的相对路径。

    <input type="file" id="file" webkitdirectory>
    

    FileReader

    以上file对象只获取到了对文件的描述信息,但没有获得文件中的数据。我们可以通过html5提供的FileReader读取到文件中的数据。

    首先创建一个FileReader实例:

    const reader = new FileReader();
    

    FileReader提供了如下方法:

    readAsArrayBuffer(file)
    按字节读取文件内容,结果用ArrayBuffer对象表示
    readAsBinaryString(file)
    按字节读取文件内容,结果为文件的二进制串
    readAsDataURL(file)
    读取文件内容,结果用data:url的字符串形式表示
    readAsText(file,encoding)
    按字符读取文件内容,结果用字符串形式表示
    abort()
    终止文件读取操作

    readAsDataURL和readAsText较为常用,这里只对这两者进行说明。

    readAsDataURL会将文件内容进行base64编码后输出:

    document.querySelector('#file').addEventListener('change',(fileChoosed) => {
       const reader = new FileReader();
       reader.readAsDataURL(fileChoosed.target.files[0]);//发起异步请求
       reader.onload = function(readRes){
           console.log('加载完成', readRes.target.result)
       }          
    })
    

    控制台为当前所传文件的base64编码表示。由于媒体文件的src属性,可以通过采用网络地址或base64的方式显示,因此我们可以利用readAsDataURL实现对图片的预览。
    如下,只需将读取的结果赋给图片的src属性,即可预览图片:

    <input type="file" id="file" />
    <img src="" id="imgPreview">
    
    document.querySelector('#file').addEventListener('change',(fileChoosed) => {
        const reader = new FileReader();
        reader.readAsDataURL(fileChoosed.target.files[0]);//发起异步请求
        reader.onload = function(readRes){
            document.querySelector('#imgPreview').src = readRes.target.result
        }           
    })
    

    readAsText可按指定编码方式读取文件,但读取文件的单位是字符,故对于文本文件,只要按规定的编码方式读取即可;而对于媒体文件(图片、音频、视频),其内部组成并不是按字符排列,故采用readAsText读取,会产生乱码。

    FileReader事件:

    onloadstart 当读取操作开始时调用
    onprogress 在读取数据过程中周期性调用
    onabort 当读取操作被中止时调用
    onerror 当读取操作发生错误时调用
    onload 当读取操作成功完成时调用
    onloadend 当读取操作完成时调用,无论成功,失败或取消

    注释:

    1. 每过50ms左右,就会触发一次progress事件,对于较大的文件可以利用progress实现进度条;
    2. 由于种种原因无法读取文件时,会触发error事件。触发error事件时,相关信息保存在FileReader对象的error属性中,这个属性将保存一个对象,此对象只有一个属性code,即错误码。1表示未找到文件,2表示安全性错误,3表示读取中断,4表示文件不可读,5表示编码错误。

    示例:

    <input type="file" id="file" />
    
    document.querySelector('#file').addEventListener('change',(fileChoosed) => {
        const reader = new FileReader();
        reader.readAsText(fileChoosed.target.files[0],'utf-8');//发起异步请求
        reader.onloadstart = function(readRes){
        	// 文件大于500kb则取消加载
            if(readRes.total > 1024*500) {            
                reader.abort()
            } else {
                console.log("开始加载")
            }
        }
        reader.onabort = function (readRes) {
            console.log('加载已取消')
        }
        reader.onprogress = function(readRes){
            console.log("加载中", `${(readRes.loaded / readRes.total).toFixed(2)*100}/100`)
        }
        reader.onload = function(readRes){
            console.log('加载成功')
        }
        reader.onloadend= function(readRes){
            console.log("加载结束")
        }            
    })
    
    展开全文
  • Java中FileReader类的常用方法

    千次阅读 2018-05-23 18:53:21
    FileReader字符输入流构造方法public FileReader(String fileName) throws FileNotFoundException在给定从中读取数据的文件名的情况下创建一个新 FileReader。 fileName - 要从中读取数据的文件的名称 public ...
    FileReader字符输入流

    构造方法

    public FileReader(String fileName) throws FileNotFoundException
    在给定从中读取数据的文件名的情况下创建一个新 FileReader。
    fileName - 要从中读取数据的文件的名称

    public FileReader(File file) throws FileNotFoundException
    在给定从中读取数据的 File 的情况下创建一个新 FileReader。
    file - 要从中读取数据的 File  

    常用方法

    public int read() throws IOException
    读取单个字符。
    读取的字符,如果已到达流的末尾,则返回 -1

    public int read(char[] cbuf) throws IOException
    读取一个字符数组
    读取的字符,如果已到达流的末尾,则返回 -1

    cbuf - 目标缓冲区

    public void close() throws IOException
    关闭该流并释放与之关联的所有资源。

    程序示例

    public static void main(String[] args) throws Exception {
        //读取当前项目下的StringDemo.java文件
        FileReader fr = new FileReader("StringDemo.java")
        //一次读取一个字符数组
        char[] chs = new char[1024] ;
        int len = 0 ;
        while((len=fr.read(chs))!=-1) {
            System.out.println(new String(chs,0,len));
        }
            
        //释放资源
        fr.close();
    
    }
    


    展开全文
  • FileWriter和FileReader解析

    万次阅读 2017-05-22 14:38:45
    FileWriter和FileReader是用来实现将字符读写到文件的IO类。1.FileWriter  是用来方便的将字符数据写入文件的类,这个类的构造函数假设默认的字符编码方式和缓冲区大小的可被接受的,如果要改变指定编码和缓冲区...
  • java字符流主要用于文本数据的操作,根据流向又可以分为输入流与输出流,从java IO的类总结...本篇主要总结一下FileReader与FileWriter。 一、FileReader 流向为操作对象到内存,所以为输入流。构造方法有三个,常用
  • 1、FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。   FileReader接口的方法 方法名 ...
  • FileReader 文件操作

    千次阅读 2019-09-11 09:08:41
    FileReader html5 中新增的⽂件操作: File:代表⼀个⽂件对象 FileList:代表⼀个⽂件列表对象,类数组 FileReader:⽤于从⽂件中读取数据 FileWriter:⽤于向⽂件中写出数据 调⽤ fileReader 对象的⽅法 ...
  • HTML5之FileReader的使用

    万次阅读 多人点赞 2013-05-23 23:09:58
    HTML5定义了FileReader作为文件API的重要成员用于读取...FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr =
  • FileReader

    2019-08-19 11:33:43
    什么是FileReader接口? 文章目录什么是FileReader接口?创建读取文件对象FileReader接口的方法FileReader接口事件FileReader接口的使用 用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步...
  • Java FileReader使用相对路径读取文件

    千次阅读 2020-06-19 20:26:08
    Java FileReader使用相对路径读取文件 觉得有用的话,欢迎一起讨论相互学习~Follow Me 在进行编程时需要时常更换主机进行测试,如果使用绝对路径则需要经常更改,为此使用相对路径是一个不错的选择。但是使用./,../...
  • JS-FileReader读取文件

    千次阅读 2019-02-21 10:09:57
    https://www.cnblogs.com/youhong/p/7221080.html?utm_source=itdadao&amp;utm_medium=referral
  • FileReader的使用方法

    万次阅读 2018-07-13 15:52:58
    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。 其中File对象可以是来自用户在一个元素上选择文件后返回的...
  • FileReader读取中文字符乱码问题

    千次阅读 2017-06-01 16:28:26
    FileReader fr=new FileReader(new File(filePath)); BufferedReader br = new BufferedReader(fr); 直接使用FileReader读取一个包含中文字符的文件,将字符输入流放到BufferedReader中,通过BufferedReader读取出来 ...
  • 之前用FileReader读取文件时输出控制台发现出现了中文乱码,考虑到应该是编码格式不一致的问题导致的,这里在本地创建的一个txt文本文件,默认保存的文件编码格式是ANSI,那么FileReader在读取文件的编码格式一定是...
  • FileReader和BufferedReader的区别

    千次阅读 2017-07-22 21:34:02
    1.FileReader不能一行行读,BufferedReader可以一行行地读 2.BufferedReader可以一行行地读效率高,因为减少了IO的次数
  • 关于fileReader的一个坑

    千次阅读 2018-09-09 23:01:49
    在用fileReader做图片浏览上传时,  使用base64格式 var _this = this; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { PostBatchUpload...
  • @[TOC](JavaScript读写本地文件(HTML5 FileReader FileWriter) ) 简介 主要利用HTML5的新特性 File System API 来实现读写文件操作 FileWriter FileReader 下图可以看到文件已经被成功的读取 ...
  • FileReader 获取图片BASE64 代码 并预览

    万次阅读 2017-10-18 11:19:22
    FileReader 获取图片的base64 代码 并预览FileReader ,老实说我也不怎么熟悉。在这里只是记录使用方法。 方法名 参数 描述 abort none 中断读取 readAsBinaryString file(blob) 将文件读取为二进制码 ...
  • vue利用fileReader进行图片上传

    千次阅读 2019-06-14 10:10:49
    之前在使用vue和iview写项目的时候本想利用iview自带的action进行图片上传功能,可是试了很多次...因为iview是利用fromdata实现图片上传,所以后来就自己利用filereader来进行尝试,结果成功了。具体代码如下: ...
1 2 3 4 5 ... 20
收藏数 94,032
精华内容 37,612
关键字:

filereader