在不经过服务器的时候,本地预览照片,当确定以后再上传

它是H5提供的构造函数

用法:

<input type='file'>
<img src='' alt=''> <script> const inp = document.querySelector('input')
const img = document.querySelector('img') inp.addEventListener('change',function(e){ const fileInfo = e.targer.files[0]
const fr = new FileReader() // 这个方法是以base64编码形式解析文件
fr.readAsDataURL(fileInfo) fr.onload = function() {
// console.log(ft.result)
img.src = fr.result
}
}) </script>
fr.readAsArrayBuffer(fileInfo)
// 用数字的方式组成的文件信息 fr.readAsTest(fileInfo)
// 读一个HTML片段 - 富文本就是这么来的 fr.onprogress = function(e){ console.log(e) }
// 进度条的形式,分段上传

JavaScript 中的 FileReader的更多相关文章

  1. JavaScript 中的FileReader对象(实现上传图片预览)

    方法一:使用js的FileReader对象 1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new Fi ...

  2. 在JavaScript中进行文件处理,第二部分:文件读取

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 在我的前一篇blog中,我介绍了在JavaScr ...

  3. 在JavaScript中进行文件处理,第五部分:Blobs

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 到目前为止,这个系列的帖子集中在和这些文件交互- ...

  4. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  5. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  6. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  7. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  8. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  9. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

随机推荐

  1. Good Introduction of Kerberos and RADIUS

    1. RADIUS https://baike.baidu.com/item/RADIUS/3073981?fr=aladdin http://www.h3c.com/cn/d_201309/9220 ...

  2. iOS 如何查看APP的jetsamEvent日志

    1.如何在iPhone上查看 设置-通用-分析-分析数据- JetsamEvent+日志 打头的系统日志. 2.如何在Mac 上查看此类分析日志 1.手机链接MAC 2.打开iTunes,点开手机图标 ...

  3. 必备Linux命令和C语言基础

    每一个学习嵌入式单片机的伙伴我相信对于这两个都不陌生,这毕竟是嵌入式单片机的生存之道    所有基础还是要打牢的   有句老话说的好基础不牢地动山摇    下面看下系统的资料吧   希望能对大家有所帮 ...

  4. debug_backtrace

    <?php one(); function one() { two(); } function two() { three(); } function three() { print_r( de ...

  5. mysql 外键约束及表关联

    一.MYSQL中的约束 1.主键:primary key 唯一非空的特性并且可以优化查询速度 2.外键:foreign key 外键的作用保证2个或2个以上的数据表的数据一致性和完整性 3.唯一:un ...

  6. js除法四舍五入

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. c++11 强类型枚举 enum class

    在标准C++中,枚举类型不是类型安全的.枚举类型被视为整数,这使得两种不同的枚举类型之间可以进行比较.C++03 唯一提供的安全机制是一个整数或一个枚举型值不能隐式转换到另一个枚举别型. 此外,枚举所 ...

  8. new和malloc区别,delete和delete []区别

    面试被问到上述问题,所以特地总结一下: 一.new和malloc的区别. 1.new可以返回指定类型的指针,并且自动分配内存大小:malloc需要计算手动计算分配空间的大小,并且返回值需要强转为实际类 ...

  9. Centos7.3安装和配置Tomcat8

    1.下载tomcat8压缩包 下载地址:https://pan.baidu.com/s/1ONIq3S5YjbCsET1rA13lGA 2.通过xftp工具将压缩包上传到usr/java下,然后使用下 ...

  10. 775. Global and Local Inversions

    We have some permutation A of [0, 1, ..., N - 1], where N is the length of A. The number of (global) ...