浅谈FileReader

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

了解https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

1、FileReader对象的方法
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

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

2、. 处理事件
FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态。

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

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

读取文件代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</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.onload=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.onload=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.onload=function(f){

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

            //显示文件

            result.innerHTML=this.result;

        }

    }

</script>

<p>

    <label>请选择一个文件：</label>

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

    <input type="button" value="读取图像" onclick="readAsDataURL()" />

    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />

    <input type="button" value="读取文本文件" onclick="readAsText()" />

</p>

<div id="result" name="result"></div>

</body>

</html>

简单的上传实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>html5filereader上传图片</title>

    <script type="text/javascript">

        var loadImageFile = (function () {

            if (window.FileReader) {

                var    oPreviewImg = null,

                        oFReader = new window.FileReader(),//创建对象

                        rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

                oFReader.onload = function (oFREvent) {

                    console.log(!oPreviewImg);//true

                    if (!oPreviewImg) {

                        var newPreview = document.getElementById("imagePreview");

                        oPreviewImg = new Image();

                        oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";

                        oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";

                        newPreview.appendChild(oPreviewImg);

                    }

                    oPreviewImg.src = oFREvent.target.result;

                    document.getElementById('result').innerHTML="<img src='"+oFREvent.target.result+"'>"

                };

                return function () {

                    var aFiles = document.getElementById("imageInput").files;

                    console.log(aFiles);

                    if (aFiles.length === 0) { return; }

                    if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }

                    oFReader.readAsDataURL(aFiles[0]);

                }

            }

            if (navigator.appName === "Microsoft Internet Explorer") {

                return function () {

                    document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;

                }

            }

        })();

    </script>

    <style type="text/css">

        #imagePreview {

            width: 160px;

            height: 120px;

            float: right;

            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);

        }

    </style>

</head>

<body>

<div id="imagePreview"></div>

<form name="uploadForm">

    <div id="result"></div>

    <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />

        <input type="submit" value="Send" /></p>

</form>

</body>

</html>

浅谈FileReader的更多相关文章

【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉前言我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
浅谈 Fragment 生命周期
版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...
浅谈 LayoutInflater
浅谈 LayoutInflater 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰源码:AndroidDemo/View 文中如有纰漏,欢迎大家留言指出. 在 Android 的 ...
浅谈Java的throw与throws
转载:http://blog.csdn.net/luoweifu/article/details/10721543 我进行了一些加工,不是本人原创但比原博主要更完善~ 浅谈Java异常以前虽然知道一 ...
浅谈SQL注入风险 - 一个Login拿下Server
前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...
浅谈WebService的版本兼容性设计
在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...
浅谈angular2+ionic2
浅谈angular2+ionic2 前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别. 1. 项目所用:angular2+ionic2 ...
iOS开发之浅谈MVVM的架构设计与团队协作
今天写这篇博客是想达到抛砖引玉的作用,想与大家交流一下思想,相互学习,博文中有不足之处还望大家批评指正.本篇博客的内容沿袭以往博客的风格,也是以干货为主,偶尔扯扯咸蛋(哈哈~不好好工作又开始发表博客啦 ...
Linux特殊符号浅谈
Linux特殊字符浅谈我们经常跟键盘上面那些特殊符号比如(?.!.~...)打交道,其实在Linux有其独特的含义,大致可以分为三类:Linux特殊符号.通配符.正则表达式. Linux特殊符号又可 ...

随机推荐

【总结】 BZOJ前100题总结
前言最近发现自己trl,所以要多做题目但是Tham布置的题目一道都不会,只能来写BZOJ HA(蛤)OI 1041 复数可以分解成两个点,所以直接把\(R^2\)质因数分解一下就可以了,注意计算每一 ...
python网络编程--FTP上传文件示例
1.基础版(供学习了解原理使用,low) server服务端 import socket import struct import json server = socket.socket() ip_p ...
CF79D Password
题目链接题意:给定长度为n的0/1序列,初始值都为0.你每次可以在给定的l个长度中的\(a_i\)并将序列中长度为\(a_i\)的部分取反.使得最终状态为\(x_1\)~\(x_k\),求最少取反次 ...
leetcode 56 合并区间 JAVA
题目: 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18]] 解释: 区间 [ ...
SpringMvc拦截器运行原理。
首先,先简单的说一下怎么配置SpringMvc的拦截器. 分两步,第一步先定义一个类,实现HandlerInterceptor接口. import javax.servlet.http.HttpSer ...
POJ 2192
#include <iostream> #include <string> #define MAXN 500 using namespace std; bool dp[MAXN ...
PHP中filesystem的使用
PHP中filesystem的使用最近在用腾讯云COS上传对象的时候,涉及到文件流的使用参考文档:https://cloud.tencent.com/document/product/436/12 ...
Python【每日一问】16
问: [基础题]TCP/UDP/HTTP协议区别 [提高题]在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数, ...
【笔记】AJAX+SweetAlert插件实现删除操作
[笔记]AJAX+SweetAlert插件实现删除操作 Django AJAX SweetAlert 展示 SweetAlert 插件介绍 SweetAlert 是一个 JS 插件,能够完美替代 J ...
Java Web入门学习（二） Eclipse的配置
Java Web学习(二) Eclipse的配置一.下载Eclipse 1.进入Eclipse官网,进行下载上图,下载Eclipse IDE for JaveEE Developers 版本,然后 ...

浅谈FileReader

浅谈FileReader的更多相关文章

随机推荐

热门专题