JavaScript 中的 FileReader
在不经过服务器的时候,本地预览照片,当确定以后再上传
它是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的更多相关文章
- JavaScript 中的FileReader对象(实现上传图片预览)
方法一:使用js的FileReader对象 1.FileReader对象简介 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new Fi ...
- 在JavaScript中进行文件处理,第二部分:文件读取
译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 在我的前一篇blog中,我介绍了在JavaScr ...
- 在JavaScript中进行文件处理,第五部分:Blobs
译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 到目前为止,这个系列的帖子集中在和这些文件交互- ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- javascript中的this与函数讲解
前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...
- JavaScript 中的数据类型
Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...
- javascript中的操作符详解1
好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...
- 掌握javascript中的最基础数据结构-----数组
这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
随机推荐
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Python全栈-magedu-2018-笔记1
第一章 - Python 环境搭建 操作系统准备 准备Linux最小系统即可. 如果在虚拟机中克隆,MAC地址会变. 这里使用CentOS 6.5+ Pyenv 安装 安装git yum instal ...
- USACO1.4 1.5 搜索剪枝与数字 洛谷OJ P1214 P1215 P1217 P1218
USACO1.4 题解 Arithmetic Progressions 题意 让你求长为n的由小于2*m*m的双平方数组成的等差数列有几个 双平方数:形如 B=P*P+Q*Q,p,q>0的数 题 ...
- day22:初识面向对象
1,类可以理解为是一个模子,可以是代码精简,方便增加实例,方便修改,更加规范,能知道具体的属性,方法,但是不知道具体的值 2,对象有具体的值,属性和技能都是根据类规范的 3, 先有类才有对象 4,面向 ...
- CPU漏洞补丁KB4056892 卸载及忽略办法
2018.1.4微软发布了针对intel CPU漏洞的补丁 KB4056892 性能降低不说, 针对一般平民根本没多大意义, 另外还会导致一些软件无法正常使用, (我是使用蓝叠经典版, 启动就会蓝屏) ...
- Xposed 在android 6.0上报couldn't load class,找不到xposed_init中配置的入口类
经测试再android 4.4时是可以直接在android studio中运行debug签名包,在xposed中运行的,但是6.0的机器不好使.解决办法是在运行时使用release版并签名 apply ...
- RoR - Nested Resources, Security ,pagination
root to: 'xxx' 默认root路径 Nested Resource: Rails.application.routes.draw do resources :books do resou ...
- OC 应用跳转QQ私聊界面或者申请加群
申请加群 NSString *qq_number = QQ; NSString* urlStr = [NSString stringWithFormat:@"mqqapi://card/sh ...
- C# Json解析Json = "{\"EX_RETURN\":[{\"MATNR\":\"test\"}] }";
string jtext = "{\"jiangsu\":[{\"wuxi\":\"无锡\"},{\"suzhou\&q ...
- 微信小程序如何实现点击链接跳转到手机自带浏览器
最近遇到一个需求.公司有一个业务,制作的小程序需要跳出微信打开一个指定的我们自己的页面,拿到这个需求后我们团队分开去找资料研究方案,通过微信的开发文档.腾讯的第三方开发文档我们都查阅过资料但是最终只找 ...