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

它是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. git命令行在windows中报错WARNING: terminal is not fully functional

    今天在windows的PowerShell中执行git log命令的时候报错: WARNING: terminal is not fully functional 网上查找方法,最后 1.打开wind ...

  2. [dev][dpdk][crypto] dpdk加解密设备与IPSEC

    概述 分三部分,加解密框架(crypto framework),加解密设备(crypto dev),安全协议(Security Framework) ×  API,设计思路等,都在加解密框架里:见文档 ...

  3. mysql.user表详解

    GRANT语法:     GRANT 权限 ON 数据库.* TO 用户名@'登录主机' IDENTIFIED BY '密码'  权限:  ALL,ALTER,CREATE,DROP,SELECT,U ...

  4. mysql中的count()函数

    1.count()函数是用来统计表中记录的一个函数,返回匹配条件的行数. 2.count()语法: (1)count(*)---包括所有列,返回表中的记录数,相当于统计表的行数,在统计结果的时候,不会 ...

  5. 2018-2019-2 网络对抗技术 20165321 Exp5 MSF基础应用

    1. 实践内容(3.5分) 1.1一个主动攻击实践: (1分) 首先攻击Windows XP: 在攻击机kali输入msfconsole进入控制台,依次输入以下指令: msf > use exp ...

  6. *** target pattern contains no `%'. Stop.

    windows上的ndk工程移到linux下编译就报这个错, 解决方法,把jni目录下obj目录删除,重新编译就好了

  7. TypeError: Fetch argument 0.484375 has invalid type <class 'numpy.float32'>, must be a string or Tensor. (Can not convert a float32 into a Tensor or Operation.)

    报错: TypeError: Fetch argument 0.484375 has invalid type <class 'numpy.float32'>, must be a str ...

  8. Fiddler使用总结(转载)

    原文地址:https://www.cnblogs.com/yyhh/p/5140852.html 序章 Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获.重发.编辑.转存 ...

  9. Mybatis的updateByExampleSelective方法

    好久没些项目,一些基础框架的功能都忘记了,慢慢边做边回忆,果然自己是三流的(某个大佬说过三流的程序员看CSDN和博客) API:可以只更新传入的参数 updateByExampleSelective( ...

  10. 利用RALL机制来事项String类的赋值操作

    class String{ public: char *str; String(const char *ptr=NULL){ if(ptr==NULL) { str=NULL; }else{ str= ...