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

它是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. MTCP 在 64 位机器上不工作

    今天打开以前写的 MTCP, 却无法运行. 报错如下: Exception in thread "Thread-0" java.lang.UnsatisfiedLinkError: ...

  2. 字符串转xml,特殊字符的问题

    字符串转xml,如果字符串包含&,< 等特殊符号,转成xml 需要特殊处理,否则XML解析会出错. String uuid = UUID.randomUUID().toString(). ...

  3. openLayers,常见地图实例

    http://openlayers.org/en/master/examples/epsg-4326.html -- 标尺 http://openlayers.org/en/master/exampl ...

  4. LeetCode 606 Construct String from Binary Tree 解题报告

    题目要求 You need to construct a string consists of parenthesis and integers from a binary tree with the ...

  5. React.createClass和extends Component的区别

    React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...

  6. jQuery 选择具有特殊属性的元素

    如今有这样一种需求,须要选出全部有背景图片的元素. 这个问题有点棘手.我们无法使用选择表达式来完毕这个问题了. 使用jQuery的DOM过滤方法filter(),能够依据函数中表达的不论什么条件选择元 ...

  7. mysql实现开窗函数

    mysql实现开窗函数 http://blog.itpub.net/29989552/viewspace-2123077/ 学习过oracle的应该知道,oracle中的分析函数功能十分强大,包括ms ...

  8. linux怎么查看进程启动,用户的工作目录,pwdx,/proc/11256/cwd

    linux 通过pid 寻找程序路径的最简单命令(pwdx)  #pwdx  pid号1  [pid2] .... 在linux实际操作命令中,查看pid的方式有很多种,通过pid找程序路径的方式也有 ...

  9. VMVare的窗口自适应

    啊!好久没来博客园了.原因很简单,我把密码丢了. 最近才从系统申请重置了密码,这不,又能登录了.你可能好奇,是的,我也在疑惑:我是不是搞IT的啊?因为只要密码丢失,我就认为世界完蛋了,我完蛋了:) 这 ...

  10. 一起ORA-00028案例的处理过程

    前言 最近客户在测试新系统A时,遭遇ORA28,回话被终止的问题. 先了解一下大致环境,系统A由系统B通过rman还原恢复,应用程序已经在系统B跑批通过,现在系统A上遇到下面问题. 应用程序报错如下 ...