精华内容
参与话题
问答
  • FileReader

    2020-09-03 21:01:06
    import java.io.FileReader; import java.io.IOException; public class TestFileReader { public static void main(String[] args){ FileReader fr=null; try { File file=new File("D:\\mycode\\src\\p

    简单代码完成写入操作
    在这里插入图片描述

    import java.io.File;
    import java.io.FileReader;
    import java.io.IOException;
    
    public class TestFileReader {
    
        public static void main(String[] args){
            FileReader fr=null;
            try {
                File file=new File("D:\\mycode\\src\\pers\\wjx\\hello");
                //最好写绝对路径,如果写相对路径就默认在我们
               fr=new FileReader(file);
                int temp=fr.read();
                while(temp!=-1){
                    System.out.print((char)temp);
                    temp=fr.read();
                }
            } catch (Exception e) {
                e.printStackTrace();
            }finally {
                try {
                    if(fr!=null)fr.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
    
    展开全文
  • filereader

    2019-09-29 04:08:20
    用的是zxxFile.js 以及h5的FileReader 成功事件要在onload里面写 转载于:https://www.cnblogs.com/xzzzzBlog/p/6582758.html

    用的是zxxFile.js

    以及h5的FileReader

    成功事件要在onload里面写

    转载于:https://www.cnblogs.com/xzzzzBlog/p/6582758.html

    展开全文
  • FIleReader

    千次阅读 2019-04-02 10:04:05
    FIleReader HTML5 参考链接:...使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据...

    FIleReader HTML5

    参考链接:https://www.cnblogs.com/hhhyaaon/p/5929492.html
    https://www.cnblogs.com/makan/p/4807086.html
    使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自由拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果。

    创建FileReader对象

    var reader = new FileReader();
    

    FileReader对象
    事件

    事件名称 描述
    onabort 当读取操作被中止时调用
    onerror 当读取操作发生错误时调用
    onload 当读取操作成功完成时调用
    onloadend 当读取操作完成时调用,不管是成功还是失败
    onloadstart 当读取操作将要开始之前调用
    onprogress 在读取数据过程中周期性调用

    属性

    属性名称 描述
    error DOMError 在读取文件时发生的错误,只读。
    readyState .unsigned short 当前状态值,0—EMPTY 还没有记载任何数据。1–LOADING 正在被记载。2—DONE 已完成全部的读取请求。
    result jsval 读取的文件内容,这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作发起的方法。只读

    方法

    方法名 描述
    abort():void 终止文件读取操作
    readAsArrayBuffer(file):void 异步按字节读取文件内容,结果用ArrayBuffer对象表示
    readAsBinaryString(file):void 异步按字节读取文件内容,结果为文件的二进制串,IE浏览器不支持该方法
    readAsDataURL(file):void 异步读取文件内容,结果用data:url的字符串形式表示
    readAsText(file,encoding):void 异步按字符读取文件内容,结果用字符串形式表示

    FileReader通过异步的方式读取文件内容,结果均是通过事件回调获取,下面是一个读取本地txt文件内容的例子:

    //1.检测浏览器是否支持FileReader
    //测试结果,IE>=10,Google,FF
    if (window.FileReader) {
        var fr = new FileReader();
        console.info(fr);
    } else {
        alert("Not supported by your browser!");
    }
    
    <div class="container">
        <input type="file" id="file" multiple />
        <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />
        <h4>
            选择文件如下:
        </h4>
        <blockquote></blockquote>
    </div>
    
    var fileBox = document.getElementById('file');
    function showFiles() {
        //获取选择文件的数组
        var fileList = fileBox.files;
        for (var i = 0; i < fileList.length; i++) {
            var file = fileList[i];
            readFile(file);
        }
    }
    //读取文件内容
    //reader.readAsArrayBuffer   //将读取结果 封装成 ArrayBuffer ,如果想使用一般需要转换成 Int8Array或DataView
    //reader.readAsBinaryString  //在IE浏览器中不支持改方法
    //reader.readAsText     该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8
    //reader.readAsDataURL  //读取结果为DataURL 
    //reader.readyState    上传中的状态
    function readFile(file) {
        var reader = new FileReader();
        //reader.readAsText(file);
        //中文windows系统 txt 文本多数默认编码 gbk
        reader.readAsText(file, 'gbk');
        console.info(reader.readyState); // 状态值 1
        reader.onload = function (e) {
            console.info(e); //事件对象
            //e.target  FileReader
            //e.total   文件总大小,字节
            //e.type    上传状态‘load’
            //e.timeStamp  还不知道
    
            console.info(reader.readyState); //状态值 2
            var result = reader.result;
            $('.container blockquote').text(result);
        }
    }
    

    此外我们还可以通过注册onprogress、onerror等事件,记录文件读取进度或异常行为等等。

    下面测试一下各种输出方式
    首先准备一张图片(6764 字节)和一个txt文本(51字节)作为测试文件

     var reader = new FileReader();
    // 通过四种方式读取文件
    //reader.readAsXXX(file);   
    reader.onload = function(){
        //查看文件输出内容
        console.log(this.result);
        //查看文件内容字节大小
        console.log(new Blob([this.result]))
    }
    

    readAsText
    此方法可以通过不同的编码方式读取字符,我们使用utf-8读取
    图片输出结果
    文本输出结果:
    文本输出结果
    readAsText读取文件的单位是字符,故对于文本文件,只要按规定的编码方式读取即可;
    而对于媒体文件(图片、音频、视频),其内部组成并不是按字符排列,故采用readAsText读取,会产生乱码,同时也不是最理想的读取文件的方式。

    readAsDataURL
    图片输出结果
    文本输出结果
    readAsDataURL会将文件内容进行base64编码后输出

    readAsBinaryString
    图片输出结果
    文本输出结果
    与readAsText不同的是,readAsBinaryString函数会按字节读取文件内容。
    然而诸如0101的二进制数据只能被机器识别,若想对外可见,还是需要进行一次编码,而readAsBinaryString的结果就是读取二进制并编码后的内容。
    尽管readAsBinaryString方法可以按字节读取文件,但由于读取后的内容被编码为字符,大小会受到影响,故不适合直接传输,也不推荐使用。
    如:测试的图片文件原大小为6764 字节,而通过readAsBinaryString读取后,内容被扩充到10092个字节

    readAsArrayBuffer
    图片输出结果
    文本输出结果
    与readAsBinaryString类似,readAsArrayBuffer方法会按字节读取文件内容,并转换为ArrayBuffer对象。
    我们可以关注下文件读取后大小,与原文件大小一致。
    这也就是readAsArrayBuffer与readAsBinaryString方法的区别,readAsArrayBuffer读取文件后,会在内存中创建一个ArrayBuffer对象(二进制缓冲区),将二进制数据存放在其中。通过此方式,我们可以直接在网络中传输二进制内容。

    显示本地图片实例
    我们知道,img的src属性或background的url属性,可以通过被赋值为图片网络地址或base64的方式显示图片。
    在文件上传中,我们一般会先将本地文件上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示。
    通过FileReader的readAsDataURL方法,我们可以不经过后台,直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程,减少服务器端无用的图片资源,代码如下:

    var input  = document.getElementById("file");   // input file
    input.onchange = function(){
        var file = this.files[0];
            if(!!file){
                var reader = new FileReader();
                // 图片文件转换为base64
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    // 显示图片(三种写法)
                    document.getElementById("img").src = this.result;
                    document.getElementById("img").src = reader.result;
                    document.getElementById("img").src = e.target.result;
            }
        }
    }
    

    对于图片上传,我们也可以先将图片转换为base64进行传输,此时由于传输的图片内容就是一段字符串,故上传接口可以当做普通post接口处理,当图片传输到后台后,可以在转换为文件实体存储。
    当然,考虑到base64转换效率及其本身的大小,本方法还是适合于上传内容简单或所占内存较小的文件。

    二进制数据上传
    HTML5体系的建立引入了一大堆新的东西,基于XHR2,我们可以直接上传或下载二进制内容,无需像以往一样通过form标签由后端拉取二进制内容。
    简单整理下上传逻辑:
    1、通过input[type=“file”]标签获取本地文件File对象
    2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer
    3、创建xhr对象,配置请求信息
    4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送
    代码实现如下:

    var input  = document.getElementById("file");   // input file
    input.onchange = function(){
        var file = this.files[0];
            if(!!file){
                var reader = new FileReader();
                reader.readAsArrayBuffer(file);
                reader.onload = function(){
                    var binary = this.result;
                    upload(binary);
            }
        }
    }
    
    //文件上传
    function upload(binary){
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://xxxx/opload");
        xhr.overrideMimeType("application/octet-stream");
        //直接发送二进制数据
        if(xhr.sendAsBinary){
            xhr.sendAsBinary(binary);
        }else{
            xhr.send(binary);
        }
        
        // 监听变化
        xhr.onreadystatechange = function(e){
            if(xhr.readyState===4){
                if(xhr.status===200){
                    // 响应成功       
                }
            }
        }
    }
    
    展开全文
  • fileReader

    2019-03-11 17:55:00
    最近做的 react项目中用到了 FileReader 记录一下 ` //首先判断你的浏览器是否支持FileReader接口: if( typeof FileReader == "undefined" ){ alert( "您的浏览器不支持FileReader!" ); }else{ // do FileReader ...

    最近做的 react项目中用到了 FileReader 记录一下

    `
    //首先判断你的浏览器是否支持FileReader接口:
    if( typeof FileReader == "undefined" ){
    alert( "您的浏览器不支持FileReader!" );
    }else{
    // do FileReader things
    }

    `

    读取后台返回的流文件并下载,如果状态500表示过期 解析文本。
    `
    response.blob().then( blob => {
    if(typeof FileReader === 'undefined'){
    notification.open({
    message:'您的浏览器不支持 FileReader,请升级浏览器',
    icon: <Icon type="smile" style={{ color: '#108ee9' }} />
    })
    }
    const reader = new FileReader();

                                        reader.addEventListener("loadend", function() {                                 
                                                const resu = JSON.parse(reader.result);
                                                if(resu.code == 500){
                                                    notification.open({
                                                         message:resu.msg,
                                                          icon: <Icon type="smile" style={{ color: '#108ee9' }} />
                                                    })
                                                }else{
                                                    downloadBlob(blob);
                                                }
                                        });
                                        reader.readAsText(blob,'utf-8');
    
    
                                     //下载
                                     function downloadBlob(blob){
                                            let blobUrl = window.URL.createObjectURL(blob);
                                            let a = document.createElement('a');
                                            let filename = options.Name;
                                            a.href = blobUrl;
                                            a.download = filename;
                                            a.click();
                                            window.URL.revokeObjectURL(blobUrl);
                                     }
                            })

    `

    API

    `
    FileReader有四个方法,三个用来读取文件,一个用来中断读取:

    方法:abort
    参数:无
    作用:中断读取

    方法:readAsBinaryString
    参数:file
    作用:将文件读取为二进制码(打印出来在页面上是一堆乱码,二进制麽!)

    方法:readAsDataURL
    参数:file
    作用:将文件读取为DataURL(本例中用的就是这个方法,result就是文件的base64字符,DataURI)

    方法:readAsText
    参数:file, [optional] in DOMString encoding(第二个参数是文本的编码方式,默认UTF-8)
    作用:将文件读取为文本(读取的结果就是这个文本文件中的内容)

    此外,FileReader还包含了一套完整的事件模型,用来捕获读取文件时的状态:

    事件:onabort
    描述:读取中断时触发

    事件:onerror
    描述:出错时触发

    事件:onload
    描述:文件读取成功完成时触发

    事件:onloadend
    描述:读取完成时触发,不论读取成功还是失败

    事件:onloadstart
    描述:读取开始时触发

    事件:onprogress
    描述:读取中

    文件一旦被读取,不论成功还是失败,
    实例(var reader = new FileReader)的result属性都会被填充。
    如果读取失败,result的值就是null,
    如果读取成功,result的值就是读取的结果。

    `

    上传文件
    `
    在页面结构里,我们需要给一个input用来上传文件:

    则在支持FileReader的浏览器里就可以这样写:
    document.getElementById("File").addEventListener("change", readFile, false);
    这是在监听input的change事件,一旦选择了文件,触发了change事件,即刻调用readFile方法。
    besides,如果是上传图片,
    我们在结构里可以再给一个img:用来放置上传的图片。
    由此我们也顺便实现了在图片发送之前即显示在页面上的功能。

    现在定义这个关键的readFile方法:
    function readFile(){
    var file = this.files[0]; //input
    if( file.size > 510241024 ){ //用size属性判断文件大小不能超过5M
    alert( "你上传的文件太大了!" )
    }else{
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
    var res = this.result;
    $("#Img").attr("src", res);
    }
    }
    }
    注意,这里的this.result是把文件转换为base64后的字符串,
    如果是图片,则赋值给img的src即可显示。
    `

    转载于:https://www.cnblogs.com/chengyunshen/p/10512157.html

    展开全文
  • <p>Currently you have a configuration that allows the MessageParser and FileReaderWriter classes to be pluggable (with the emphasis on the MessageParser where SequenceFileReaderWriter is already ...
  • 文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能。...这个FileReader API 的工作原理和 File API 一样,需要使用input[type=”f

空空如也

1 2 3 4 5 ... 20
收藏数 14,327
精华内容 5,730
关键字:

filereader