<!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. 关于父组件通过v-on接收子组件多个参数的一点研究

    写组件的时候遇到一个需求,我需要在子组件向父组件传递信息 this.$emit('myEvent', 信息1, 信息2) 在父组件使用v-on来接收 <my-component @myEvent ...

  2. vue 微信内H5调起支付

    在微信内H5调起微信支付,主要依赖于一个微信的内置对象WeixinJSBridge,这个对象在其他浏览器中无效. 主要代码: import axios from 'axios'; export def ...

  3. NOIP模拟 7.04

    魔术球问题弱化版(ball.c/.cpp/.pas) [题目描述] 假设有 n 根柱子,现要按下述规则在这 n 根柱子中依次放入编号为 1,2,3,…的球. (1)每次只能在某根柱子的最上面放球. ( ...

  4. linux 下配置多个tomcat同时运行

    一个服务器上内存通常有2G或者更多,一个tomcat 运行管理这么多内存有点力不从心,并且貌似一个进程所能建立的线程数量是有限的,于是我们想要在一个服务器上运行多个tomcat.如下是摘抄自:http ...

  5. 带三角形下标的提示框（按钮button）

    HTML:<div class="leaflet-popup-content-wrapper"> <div class="leaflet-popup-c ...

  6. 在APPfuse中配置log4j进行定位

    appFuse使用log4j进行日志输出,默认日志级别为warn,输出到串口console. 一下修改为debug级别,输出到串口及文件中: 1.修改(tomcat中的页面根目录)/appfuse/W ...

  7. 1.2开发文档简读，了解全貌.mp4

  8. 运行docker容器镜像2(指定容器启动时启动的脚本)

    docker中启动容器有以下两种情况. 第一种是通过 # docker run containerid 启动一个容器. 第二种是重新启动已经关闭的容器. # docker start containe ...

  9. JavaScript中常用的几种类型检测方法

    javascript中类型检测方法有很多: typeof instanceof Object.prototype.toString constructor duck type 1.typeof 最常见 ...

  10. Mybatis表关联多对多

    创建表 创建表对应的 JavaBean 对象 package com.tanlei.newer.model; import java.util.List; /** * @author:Mr.Tan * ...