【JavaScript 教程】浏览器—File 对象,FileList 对象,FileReader 对象
web前端开发
共 3526字,需浏览 8分钟
· 2020-09-15
1、File 对象
),用户选中文件以后,浏览器就会生成一个数组,里面是每一个用户选中的文件,它们都是 File 实例对象。// HTML 代码如下
//
var file = document.getElementById('fileItem').files[0];
file instanceof File // true
file
是用户选中的第一个文件,它是 File 的实例。1.1、构造函数
File()
构造函数,用来生成 File 实例对象。new File(array, name [, options])
File()
构造函数接受三个参数。array:一个数组,成员可以是二进制对象或字符串,表示文件的内容。
name:字符串,表示文件名或文件路径。
options:配置对象,设置实例的属性。该参数可选。
type:字符串,表示实例对象的 MIME 类型,默认值为空字符串。
lastModified:时间戳,表示上次修改的时间,默认为Date.now()。
var file = new File(
['foo'],
'foo.txt',
{
type: 'text/plain',
}
);
1.2、实例属性和实例方法
File.lastModified:最后修改时间
File.name:文件名或文件路径
File.size:文件大小(单位字节)
File.type:文件的 MIME 类型
var myFile = new File([], 'file.bin', {
lastModified: new Date(2018, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.type // ""
myFile
的内容为空,也没有设置 MIME 类型,所以size
属性等于0,type
属性等于空字符串。slice()
。2、FileList 对象
FileList
对象是一个类似数组的对象,代表一组选中的文件,每个成员都是一个 File 实例。它主要出现在两个场合。文件控件节点()的files属性,返回一个 FileList 实例。
拖拉一组文件时,目标区的DataTransfer.files属性,返回一个 FileList 实例。
// HTML 代码如下
//
var files = document.getElementById('fileItem').files;
files instanceof FileList // true
files
属性是一个 FileList 实例。length
,表示包含多少个文件。item()
,用来返回指定位置的实例。它接受一个整数作为参数,表示位置的序号(从零开始)。但是,由于 FileList 的实例是一个类似数组的对象,可以直接用方括号运算符,即myFileList[0]
等同于myFileList.item(0)
,所以一般用不到item()
方法。3、FileReader 对象
FileReader
构造函数,用来生成 FileReader 实例。var reader = new FileReader();
FileReader.error:读取文件时产生的错误对象 FileReader.readyState:整数,表示读取文件时的当前状态。一共有三种可能的状态,0表示尚未加载任何数据,1表示数据正在加载,2表示加载完成。 FileReader.result:读取完成后的文件内容,有可能是字符串,也可能是一个 ArrayBuffer 实例。 FileReader.onabort:abort事件(用户终止读取操作)的监听函数。 FileReader.onerror:error事件(读取错误)的监听函数。 FileReader.onload:load事件(读取操作完成)的监听函数,通常在这个函数里面使用result属性,拿到文件内容。 FileReader.onloadstart:loadstart事件(读取操作开始)的监听函数。 FileReader.onloadend:loadend事件(读取操作结束)的监听函数。 FileReader.onprogress:progress事件(读取操作进行中)的监听函数。
load
事件的一个例子。// HTML 代码如下
//
function onChange(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function (event) {
console.log(event.target.result)
};
reader.readAsText(file);
}
load
事件发生),就打印出文件内容。FileReader.abort():终止读取操作,readyState属性将变成2。 FileReader.readAsArrayBuffer():以 ArrayBuffer 的格式读取文件,读取完成后result属性将返回一个 ArrayBuffer 实例。 FileReader.readAsBinaryString():读取完成后,result属性将返回原始的二进制字符串。 FileReader.readAsDataURL():读取完成后,result属性将返回一个 Data URL 格式(Base64 编码)的字符串,代表文件内容。对于图片文件,这个字符串可以用于
*/
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener('load', function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}上面代码中,用户选中图片文件以后,脚本会自动读取文件内容,然后作为一个 Data URL 赋值给 元素的
src
属性,从而把图片展示出来。推荐阅读 【JavaScript 教程】浏览器模型—Cookie Navigator 对象,Screen 对象。 【JavaScript 教程】浏览器—window 对象 【JavaScript 教程】浏览器—浏览器环境概述 XMLHttpRequest 对象 【JavaScript 教程】浏览器—同源限制 【JavaScript 教程】浏览器—CORS 通信 【JavaScript 教程】浏览器—Storage 接口 【JavaScript 教程】浏览器—History 对象 Location对象,URL对象,URLSearchParams;对象 【JavaScript 教程】浏览器—ArrayBuffer对象,Blob对象
评论
JavaScript 可视化:Promise执行彻底搞懂
深入探讨了 JavaScript 中 Promise 的内部机制,解释了它们如何使异步任务以非阻塞方式执行,并展示了 Promise 的创建、状态变化以及与事件循环的关系。正文从这开始~~JavaScript 中的 Promise 一开始可能会让人感到有些难以理解,但是如果我们能够理解其内部的工作原
高级前端进阶
0
我发现这款浏览器真不错
“软件分享”只分享好玩有趣的黑科技软件很多人都知道我的电脑安装了10款浏览器,每一款浏览器都有自己的分工,国内外的浏览器基本都用过,今天我又发现了一款浏览器。下载用了一下午感觉还很符合国内用户使用,这款浏览器叫CentBrowser(百分浏览器)。可以说是谷歌浏览器增强版吧。Cent Browser
一锅汤软件
2
JavaScript 可视化:Promise执行彻底搞懂
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群深入探讨了 JavaScript 中 Promise 的内部机制,解释了它们如何使异步任务以非阻塞方式执行,并展示了 Promise 的创建、状态变
程序员成长指北
2
Java与lua互相调用简单教程
来源:网络👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目
小哈学Java
0
一篇文章带你了解JavaScript作用域
点击上方“前端进阶学习交流”,进行关注回复“前端”即可获赠前端相关学习资料今日鸡汤杨家有女初长成,养在深闺人未识。在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地
前端进阶学习交流
0
超赞!这个ChatGPT提问教程,PDF免费下载
你好,我是郭震AI来袭,我们该如何学习?今天先分享给大家一份超好的GPT提问指南。教程的详细介绍参考下面视频:这个PDF资料旨在教我们更好的给GPT发送指令,让GPT更准确的回答我们的提问。一共有30页,内容包括7个小章节,按照逻辑展开。分别介绍文本回答,代码辅助,结构化结果输出,非结构化结构输出,
Python与算法社区
3
侠盗猎车手免安装教程,支持安卓+PC!
前几天有粉丝朋友问我有没有侠盗猎车手罪恶都市这个游戏,今天就从解决实际问题的角度上,亲测这款游戏从安装到试玩,当然这篇文章使用的免安装版本,方便大家解压即玩!废话不多说先来看一下实测结果吧,我两台电脑都可以玩,一台是Win10,一台是Win11免安装,解完压缩就可以直接玩:非常经典的游戏开始画面:《
dotNET全栈开发
10
2024版,尚硅谷Java学科全套教程(289.1GB),含最新技术
尚硅谷 Java 学科全套视频,很早之前分享过一次,大概是 200G 左右,今天这个是《2024 版尚硅谷 Java 学科全套教程》,新增了 80 多个 GB,里面涵盖了 2023 年、2024 年最新更新的技术,基本上涵盖了 Java 所有的技术,共 289.1GB,文末附网盘地址。目录 基础部分
路人甲Java
0