<!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. 初探uni-app

    第一步:下载 第二步:安装 第三步:创建项目 第四步:项目目录 项目运行 项目效果为 打包为原生App(云端) 运行打包 使用vue 效果如下,并不好看 使用代码如下 未完,待续.... 就是对着官网 ...

  2. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. Linux安装JDK和Tomcat

    步骤如下: 1)在/root用户下建立jdk和tomcat两个文件夹并上传jdk-7u80-linux-x64.rpm和apache-tomcat-7.0.82.zip   2)安装jdk #  rp ...

  4. 常用命令（java、linux）

    1.java打war包: jar   cvf   temp.war   */  . 命令格式: java cvf 打包文件名称 要打包的目录 打包文件保存路径 解压: jar xvf temp.war ...

  5. echarts radar 一些会用到了的功能记录

    点击雷达图小标题进行相应操作 // options中添加,坐标轴的标签是否响应和触发鼠标事件,默认不响应. radar:{ triggerEvent: true } // 添加监听事件, 点击雷达图标 ...

  6. 【插拔式】分页+bootstrap4（开源）

    1:分页源码 class Pagination(object): def __init__(self, PagerCount,Pages, perPageItemNum, maxPageNum): # ...

  7. Intellij IDEA设置忽略部分类编译错误

    有些时候我们的项目中有些错误,但这些错误并不影响项目的整体运行(或许是没有使用到),默认情况下idea是无法通过编译的,因此也就无法部署运行,要达到正确运行项目的目的需要作一些设置才行. 设置Inte ...

  8. C++模板进阶指南：SFINAE

    C++模板进阶指南:SFINAE 空明流转(https://zhuanlan.zhihu.com/p/21314708) SFINAE可以说是C++模板进阶的门槛之一,如果选择一个论题来测试对C++模 ...

  9. PB 级数据处理挑战，Kubernetes如何助力基因分析？

    摘要: 一家大型基因测序功能公司每日会产生 10TB 到 100TB 的下机数据,大数据生信分析平台需要达到 PB 级别的数据处理能力.这背后是生物科技和计算机科技的双向支撑:测序应用从科研逐步走向临 ...

  10. pycharm 永久注册

    pycharm 使用又到期了,找到了破解版亲测(到期日期2099/12/31),绝对简单好用,直接使用步骤: 一,下载pycharm(windows版):  https://www.jetbrains ...