<!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. CentOS下重启uwsgi

    使用Django开发项目,每次修改内容无法刷新,重启nginx也无效,每次都重启主机, 网上搜索很多资料,发现可以重启uwsgi来解决问题,但是发现uwsgi重启每个人都不一样,很多人写了脚本重启 我 ...

  2. Amazon Redshift数据迁移到MaxCompute

    Amazon Redshift数据迁移到MaxCompute Amazon Redshift 中的数据迁移到MaxCompute中经常需要先卸载到S3中,再到阿里云对象存储OSS中,大数据计算服务Ma ...

  3. SPSS详细操作：生存资料的Cox回归分析

    SPSS详细操作:生存资料的Cox回归分析 一.问题与数据 某研究者拟观察某新药的抗肿瘤效果,将70名肺癌患者随机分为两组,分别采用该新药和常规药物进行治疗,观察两组肺癌患者的生存情况,共随访2年.研 ...

  4. 【JZOJ4920】【NOIP2017提高组模拟12.10】降雷皇

    题目描述 降雷皇哈蒙很喜欢雷电,他想找到神奇的电光. 哈蒙有n条导线排成一排,每条导线有一个电阻值,神奇的电光只能从一根导线传到电阻比它大的上面,而且必须从左边向右传导,当然导线不必是连续的. 哈蒙想 ...

  5. 【JZOJ4901】【NOIP2016提高A组集训第18场11.17】矩阵

    题目描述 他是一名普通的农电工,他以一颗无私奉献的爱岗敬业之心,刻苦钻研业务,以娴熟的技术.热情周到的服务赢得了广大客户的尊敬和赞美.他就是老百姓称为"李电"的李春来. 众所周知, ...

  6. android GUI 流程记录

    ViewRootImpl 与 wms ViewRootImple里的 WindowSeesion是WindowManagerService的proxy, 通过这个句柄来调用WMS的功能而W是 wms用 ...

  7. shell日常使用整理

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wzzfeitian/article/details/30995303 基本常识 1.变量命名规则: ...

  8. phpexcel使用说明5----ThinkPHP+PHPExcel[导入][导出]实现方法

    转自:http://www.thinkphp.cn/code/403.html实现步骤: 注意:phpexcel必须是1.78版本的,不能用1.8以上的 一:去官网http://phpexcel.co ...

  9. Linux的 crontab定时任务小记

    编辑任务 crontab -e 查看任务 crontab -l 任务配置基本格式:*   * * * * command分(0-59) 时(0-23) 天(1-31) 月(1-12) 周(0-6,0代 ...

  10. 2019-10-22-win7-无法启动-WPF-程序-D3Dcompiler_47.dll-丢失

    title author date CreateTime categories win7 无法启动 WPF 程序 D3Dcompiler_47.dll 丢失 lindexi 2019-10-22 18 ...