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 ...
随机推荐
- 安装配置Greenplum
一.规划 1.服务器: 192.168.0.191 gpdb01 # master 192.168.0.192 gpdb02 # primary segment . ...
- 对Vuex的初步了解
文章转载于:http://www.cnblogs.com/wisewrong/p/6344390.html 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props ...
- Python Flask Restful
Flask Restful 1.flask restful 在flask基础上进行一些封装,主要用于实现restful接口 2.restful的理解 1)URI(统一资源标识符):每一个URI代表一 ...
- wpf 获取Image的图片并保存到本地
XMAL代码如下: <Image Name="ImageToSave" Source="Images/pic_bg.png" Grid.RowSpan=& ...
- Linux下进程和端口常用操作
https://blog.csdn.net/s573626822/article/details/80680456
- VUE-009-页面打开时初始化配置项内容
网页开发过程中,尤其是在表单开发过程中,不可避免的会有各种各样的基础数据需要展示,供用户使用.例如,大家在办理信用卡时,经常需要填写各种表单数据,其中:性别(男.女).学历(高中及以下.大专.本科.研 ...
- VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递. 首先,配置页面跳转路由.在 router/index.js 中配置相应的页面跳转路由,如 ...
- 学习h264 的语法规则,如何才能看懂H264 的官方文档
1. 今天想查h264 的帧率,查找资料如下: 首先要解析sps,得到两个关键的数值: num_units_in_tick, time_scale fps=time_scale/num_units_i ...
- C# Asp.net中简单操作MongoDB数据库(二)
C# Asp.net中简单操作MongoDB数据库(一) , mongodb数据库连接可以回顾上面的篇幅. 1.model类: public class BaseEntity { /// < ...
- btcpool之JobMaker
一.简介 JobMaker从kafka消息队列接收rawgbt消息,然后解码该消息中的gbt数据,生成Job,发送到kafka消息队列. 二.StratumJob结构 StratumJob结构是Job ...