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

它是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. Facebook AI的工业级NLP开源框架—— Pytext

    PyText是基于NLP深度学习技术.通过Pytorch构建的建模框架.PyText解决了既要实现快速实验又要部署大规模服务模型的经常相互冲突.并且,Facebook已经采用了使用PyText快速迭代 ...

  2. LeetCode 217 Contains Duplicate 解题报告

    题目要求 Given an array of integers, find if the array contains any duplicates. Your function should ret ...

  3. Python+Selenium+PageObject

    一.安装page_objects测试库 二.目录介绍 1.pages包:用于各界面元素定位,如BaseLoginPage.py 2.testcases包:用于编写各功能测试用例,如Login.py 3 ...

  4. 学习lambda表达式总结

    因为最近开发涉及到大量的集合数据处理,就开始研究lambda表达式使用,看了<Java8函数式编程>,同时研究了不少博客,总结了一些基础的用法,写一篇博客,为以后的使用提供便利. 下面介绍 ...

  5. Spring Boo数据访问JDBC

    一.SpringBoot 访问JDBC原理 我们可以参考源代码:SpringBoot2中默认的数据源是使用HikariDataSource /** * Hikari DataSource config ...

  6. flask学习笔记(1)-虚拟环境安装

    Mac(类Linux): pip install virtualenv mkdir testvirtualenv cd testvirtualenv virtualenv flask-env#创建虚拟 ...

  7. socket通信的遇到的问题1

    /*使用select对fd可读写,格式*/ while(ctrl){ //// FD_ZERO(&readSocketSet); FD_SET(readSocketFd,&readSo ...

  8. gcc在64位系统上一个史诗级WARNING

    如下图所示,可以看到y的地址在传入函数并被返回后,高32位被截断了,于是发生了Segment fault. 首次是在MAC OS X上发现的,本以为是MAX OS X编译器自己的策略,后来在64位Ub ...

  9. 20175211 2018-2019-2 《Java程序设计》第六周学习总结

    目录 教材学习内容总结 第七章 内部类与异常类 第十章 输入.输出流 教材学习中的问题和解决过程 代码托管 学习进度条 参考资料 教材学习内容总结 第七章 内部类与异常类 第十章 输入.输出流 教材学 ...

  10. selenium各种定位方法(转)

    selenium使用 Xpath CSS JavaScript jQuery的定位方法 (治疗selenium各种定位不到,点击不了的并发症) 2017年07月28日 22:47:36 阅读数:369 ...