<!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. reactjs scrollTop

    问题1: 单页应用开发时,当在A页面滚动滚动条后,点击进入B页面,滚动条保持在A页面的滚动位置. 目标: 同级路由切换时,滚动条回滚到页面顶端. 解决方案: //在componentDidMount周 ...

  2. SDUT-3404_数据结构实验之排序七：选课名单

    数据结构实验之排序七:选课名单 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 随着学校规模的扩大,学生人数急剧增加,选 ...

  3. SurfaceFlinger与Surface概述

    基本原理: SF一个Client对应一个app中的SurfaceComposerClient, 分别是Binder的n端和b端,主要用来CreateSurface 一个app中有多个Activity, ...

  4. Python之collection

    1.计数器(counter) Counter是对字典类型的补充,用于追踪值的出现次数. ps:具备字典的所有功能 + 自己的功能 c = Counter('abcdeabcdabcaba') prin ...

  5. Directx11 教程(1) 基本的windows应用程序框架(1)

    原文:Directx11 教程(1) 基本的windows应用程序框架(1)        在vs2010中,建立一个新的win32工程,名字是: myTutorialD3D11, 注意:同时勾选Cr ...

  6. react-jd-index

    看见一些代码的产物,会觉得非常的漂亮~感谢无私开源的程序员们~你们是最可爱的人儿~~ //index.jsx require('./app/lib/common.css'); import React ...

  7. 【git基本操作】总结

    "git fetch GitLab: Your account has been blocked.fatal: Could not read from remote repository. ...

  8. Android7.0 添加快速设定Quick Settings Tile

    Android7.0新推出了一个非常实用的功能--添加快速设定(或者翻译成快速设置),但是感觉社区里关注的人比较少,可能目前为止国内还没有Android7.0的手机,但是越早接触越好,甚至可以告诉产品 ...

  9. 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 M. Frequent Subsets Problem【状态压缩】

    2017 ACM-ICPC 亚洲区(南宁赛区)网络赛  M. Frequent Subsets Problem 题意:给定N和α还有M个U={1,2,3,...N}的子集,求子集X个数,X满足:X是U ...

  10. Java实现接口用来弥补Java单继承的缺陷

    package com.test3;/** * @author qingfeng * 功能:继承类 VS 实现接口 :两者之间的关系(实现接口用来弥补Java单继承的缺陷) */public clas ...