<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 20px;

            width: 0%;

            background-color:red;

        }

    </style>

</head>

<body>

<!--展示图片：-->

<!--src:指定路径(资源定位--url):src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，它占用服务器资源-->

<!--<img src="../images/l1.jpg" alt="">-->

<!--需求：即时预览：

即时：当用户选择完图片之后就立刻进行预览的处理 >>onchange

预览：通过文件读取对象的readAsDataURL()完成-->

<form action="">

    文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();" multiple=“multiple”> <br>

    <div></div>

    <p></p>

    <input type="submit">

</form>

<img src="" alt="">

<script>

    var div=document.querySelector("div");

    /*FileReader:读取文件内容

    * 1.readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8

    * 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储

    * 3.readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。

    * abort():中断读取*/

    function getFileContent(){

       /*1.创建文件读取对象*/

        var reader=new FileReader();

        /*2.读取文件，获取DataURL

        * 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中

        * 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)

        * 2.3:文件存储在file表单元素的files属性中，它是一个数组*/

        var file=document.querySelector("#myFile").files;

        reader.readAsDataURL(file[0]);   //读取图片

        // reader.readAsText(file[0]); //读取txt文件

        /*获取数据*/

        /*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态

        * onabort:读取文件中断片时触发

        * onerror:读取错误时触发

        * onload:文件读取成功完成时触发

        * onloadend:读取完成时触发，无论成功还是失败

        * onloadstart:开始读取时触发

        * onprogress:读取文件过程中持续触发*/

        reader.onload=function(){

            //console.log(reader.result);

            /*展示*/

            document.querySelector("img").src=reader.result;

            // document.querySelector('p').innerText= reader.result;

        }

        reader.onprogress=function(e){

            var percent= e.loaded/ e.total*100+"%";

            div.style.width=percent;

        }

    }

</script>

</body>

</html>

H5 FileReader读取文件的更多相关文章

  1. HTML5 文件域+FileReader 读取文件(一)

    在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...

  2. FileReader读取文件里文乱码问题

    有一个UTF-8编码的文本文件,用FileReader读取到一个字符串,然后转换字符集:str=newString(str.getBytes(),"UTF-8");结果大部分中文显 ...

  3. HTML5 文件域+FileReader 读取文件并上传到服务器(三)

    一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...

  4. HTML5 文件域+FileReader 读取文件(二)

    一.读取文本文件内容,指定字符编码 <div class="container"> <!--文本文件验证--> <input type="f ...

  5. FileReader读取文件详解

    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...

  6. FileReader读取文件

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  7. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  8. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  9. HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

    一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...

随机推荐

  1. MySQL.之 一行内容转换多行

    MySQL.之 一行内容转换多行 描述: 将一行记录中的某一列值(值格式:数据之间用英文逗号隔开),将这一数据转换成多行. 例如:表 cds_var 中的 cds_value 中的数据格式:多个id之 ...

  2. vue源码解读-目录结构

    目录结构 ├── scripts ------------------------------- 构建相关的文件,一般情况下我们不需要动│ ├── git-hooks ---------------- ...

  3. 计算机网络.{wireshark的使用实验}

    ---恢复内容开始--- 三种选择 1 2 3 端口镜像:交换机的某个端口,接受或者发送的数据给另外一个端口 ARP欺骗: ARP欺骗是利用ARP协议自身的不足进行的欺骗 1 执行ping命令, 2 ...

  4. 新一代互联网传输协议QUIC浅析

    QUIC(Quick UDP Internet Connection)是谷歌制定的一种互联网传输层协议,它基于UDP传输层协议,同时兼具TCP.TLS.HTTP/2等协议的可靠性与安全性,可以有效减少 ...

  5. (转） Hibernate持久化类与主键生成策略

    http://blog.csdn.net/yerenyuan_pku/article/details/65462930 Hibernate持久化类 什么是持久化类呢?在Hibernate中持久化类的英 ...

  6. Mathcad 是一种工程计算软件,主要运算功能:代数运算、线性代数、微积分、符号计算、2D和3D图表、动画、函数、程序编写、逻辑运算、变量与单位的定义和计算等。

    Mathcad软件包Mathcad是由MathSoft公司(2006 年4 月被美国PTC收购)推出的一种交互式数值计算系统. Mathcad 是一种工程计算软件,作为工程计算的全球标准,与专有的计算 ...

  7. Java Map 排序

    1. 按照key值排序 对于java中Map的排序,有排序Map,比如TreeMap,对于这个Map,首先只能按照键排序,其次再put和remove的时候由于需要排序,性能上会有所牺牲. 这种方案,使 ...

  8. C​#​字​符​串​与​ ​b​y​t​e​数​据​的​互​相​转​换

    string和byte[]的转换 (C#) string类型转成byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes ( s ...

  9. Directx11教程(11) 增加一个debug宏

    原文:Directx11教程(11) 增加一个debug宏       现在我们在common.h中增加一个debug的宏,在每个d3d11函数后调用,如果d3d函数出错,它能够给出程序中错误的代码行 ...

  10. 跟我一起认识axure（二）

    创建企业网站页面步骤 第一步修改这里 变成 第一部分就完成了 第二部分部件窗口 在Axure中设计页面像小时候玩的拼图游戏,那么部件窗口就是专门用来存放拼图块的容器 使用部件窗口中常用的部件设计欢迎页 ...