FileReader的使用方法

根据MDN文档的阐释

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

使用方法：通过构造函数初始化一个FileReader对象

const reader = new FileReader();

常用事件
FileReader.onload事件在读取完成后触发。

常用方法
FileReader.readAsDataURL()开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

简单的React上传文件例子

import React from 'react';export default class UploadPic extends React.Component {constructor(props) {super(props);this.state = {previewPic: ''};this.handleUpload = this.handleUpload.bind(this);}handleUpload(e) {console.log(e.target.files[0]);const reader = new FileReader();// 读取文件内容，结果用data:url的字符串形式表示reader.readAsDataURL(e.target.files[0]);reader.onload = function(e) {console.log(e.target.result);  // 上传的图片的编码this.setState({previewPic: e.target.result});}.bind(this);}render() {const { previewPic } = this.state;return (<div id="upload-pic"><input type="file" className="file" onChange={this.handleUpload} /><div><img src={previewPic} alt="" style={{width: '70px' }} /></div></div>)}
}

FileReader的使用方法相关推荐

html5 filereader读取文件,H5的FileReader分布读取文件应该如何使用以及其方法简介...
这次给大家带来H5的FileReader分布读取文件应该如何使用以及其方法简介,H5的FileReader分布读取文件的使用以及其方法简介的注意事项有哪些,下面就是实战案例,一起来看一下. 先介绍一下 ...
Html5 FileReader 对文件进行Base64编码
以Base64进行编码的数据Url开始越来越广泛的被应用起来,原来做Base64转换要自己写一个小程序来转,其实Html5的FileReader的readAsDataURL方法读取出的数据就已经是Ba ...
毕业论文中使用的技术—FileReader接口
用来把文件读入内存,并且读取文件中的数据. FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据 FileReader接口的方法方法名参 ...
FileReader对象和FormData对象
FormData对象一.概述 FormData就是表单数据,我们提交表单所用的数据,H5里新加了FormData对象,可以让我们对表单数据进行操作,甚至自己组装表单数据进行提交,而不是单纯的仅仅是页 ...
html5的FileReader文件读取
此文引用:http://blog.csdn.net/jackfrued/article/details/8967667 一:FileReader FileReader是API重要成员用于读取文件,Fi ...
Java文件字节流和字符流FileInputStream,FileOutputStream，FileReader,FileWriter
一,文件输入流和文件输出流:FileInputStream,FileOutputStream FileInputStream可以使用read()方法一次读入一个字节,并以int类型返回,或者是使用re ...
java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
获取上传图片路径方法(新旧方法)
旧方法 //获取上传图片路径1 function fileComment(obj) {/*获取input=file图片路径*/var objUrl = getObjectURL(obj.files[0 ...
JavaScript通过 new FileReader() 获取图片base64 无组件上传图片
我们知道,img的src属性或background的url属性,可以通过被赋值为图片网络地址或base64的方式显示图片. 在文件上传中,我们一般会先将本地文件上传到服务器,上传成功后,由后台返回图片 ...

FileReader的使用方法

FileReader的使用方法相关推荐

最新文章

热门文章