javascript中有没有file对象

javascript中有没有file对象

浏览次数:1513次
信息来源: 银河系资源网
更新日期: 2022-07-03
文章简介

javascript中有file对象;file对象代表一个文件,用于读写文件信息,该对象继承了Blob对象,并扩展了与文件系统的功能,所有可以使用Blob对象的场合都可以使用file对象;可以利用“new File(fileParts, fileName, [o...

javascript中有file对象;file对象代表一个文件,用于读写文件信息,该对象继承了Blob对象,并扩展了与文件系统的功能,所有可以使用Blob对象的场合都可以使用file对象;可以利用“new File(fileParts, fileName, [options])”构造器来获取file对象。

本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

javascript中有file对象

File 对象

File 对象代表一个文件,用来读写文件信息。它继承了 Blob 对象,或者说是一种特殊的 Blob 对象,所有可以使用 Blob 对象的场合都可以使用它。

最常见的使用场合是表单的文件上传控件(),用户选中文件以后,浏览器就会生成一个数组,里面是每一个用户选中的文件,它们都是 File 实例对象。

// HTML 代码如下
// <input id="fileItem" type="file">
var file = document.getElementById('fileItem').files[0];
file instanceof File // true

上面代码中,file是用户选中的第一个文件,它是 File 的实例。

构造函数

浏览器原生提供一个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',
  }
);

实例属性和实例方法

File 对象有以下实例属性。

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属性等于空字符串。

File 对象没有自己的实例方法,由于继承了 Blob 对象,因此可以使用 Blob 的实例方法slice()。

扩展知识:

有两种方式可以获取它。

第一种,与 Blob 类似,有一个构造器:

new File(fileParts, fileName, [options])

  • fileParts —— Blob/BufferSource/String 类型值的数组。

  • fileName —— 文件名字符串。

  • options —— 可选对象:

    • lastModified —— 最后一次修改的时间戳(整数日期)。

第二种,input 标签

更常见的是,我们从 <input type="file">或拖放或其他浏览器接口来获取文件。在这种情况下,file 将从操作系统(OS)获得 this 信息。

由于 File 是继承自 Blob的,所以 File 对象具有相同的属性,附加:

  • name —— 文件名,
  • lastModified —— 最后一次修改的时间戳。

这就是我们从 <input type="file"> 中获取 File 对象的方式:

<input type="file" onchange="showFile(this)"><script>function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // 例如 my.png
  alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824}</script>

详细点:

请注意:

输入(input)可以选择多个文件,因此 input.files 是一个类数组对象。这里我们只有一个文件,所以我们只取
input.files[0]。

【:javascript教程、web前端】

以上就是javascript中有没有file对象的详细内容

标签: 暂无标签
bootstrap中导航条用什么包裹
« 上一篇
媒体查询是不是css3新增属性
下一篇 »
  • jquery怎么在元素内部增加元素
    594919阅读
    方法:1、用“$(指定元素).prepend(新元素)”或“$(新元素).prependTo(指定元素)”,可在开头增加元素;2、用“$(指定元素).append(新元素)”或“$(新元素).appendTo(指定元素)”,在末尾增加元素。本教程操作环境:...
  • css怎么去除a标签鼠标样式
    296188阅读
    在css中,可用cursor属性去除a标签的鼠标样式,该属性用于定义鼠标指针在一个元素边界范围内所用的鼠标样式,属性值设置为none时,会去除元素的鼠标样式,设置为default时,显示默认箭头样式,语法为“a{cursor:none...
  • react的脚手架是什么意思
    40004阅读
    在react中,脚手架是快速生成项目工程化结构工具的意思;React脚手架能够快速开始一个React的项目,生成一个通用的目录结构,并配置所需环境,其中包含基础的依赖库,只需要利用“npm install”就能够安装,节省了项...
  • 浅析Bootstrap中列表组、分页和进度条组件的用法
    39607阅读
    Bootstrap中怎么实现列表组、分页和进度条?下面本篇文章给大家介绍一下Bootstrap中列表组、分页和进度条组件的用法,希望对大家有所帮助!列表组使用.list-group选择列表组添加.active到 a.list-group-item以指示当...
  • JavaScript有没有stl库
    10060阅读
    JavaScript没有stl库。stl库是标准模板库,是一个具有工业强度的高效的“C++”程序库,用于提供基本的语言本身的数据结构等扩展支持,stl库被容纳与“C++”标准程序库中,因此在JavaScript中没有stl库。本教程操作环...
  • es6的模块导出使用什么方法
    5592阅读
    es6的模块导出使用的方法:1、导出默认模块,一个模块文件只能有一个默认模块,语法为“export default 需要导出的成员”;2、导出普通模块,一个模块文件可以有多个普通模块,语法为“export 按需导出的成员”。本教...
  • css3新增长度单位的使用方法是什么
    4315阅读
    使用方法:1、em表示相对于当前对象内文本的字体大小;2、rem表示相对于根元素的字体大小;3、ch表示数字0的大小;4、vh表示百分比视口的高度;5、vw表示百分比视口的宽度;6、ex表示当前字体的小写x字母的的高度或者...
  • 在css3中可实现缩放效果的是什么属性
    4263阅读
    在css3中可实现缩放效果的是transform属性。transform属性可以和scaleX()函数实现水平方向的缩放效果、可以和scaleY()函数实现垂直方向的缩放效果、可和“scale(x,y)”函数实现水平方向和垂直方向同时缩放。本教程操...
  • 使用javascript:void(0)的原因是什么
    4183阅读
    使用“javascript:void(0)”的原因是:可以防止链接跳转到其他页面,保留链接的样式,并且不让链接执行实际操作。void关键字用于指定要计算一个表达式但是不返回值,“void(0)”也就表示不进行任何操作。本教程操作环...
  • jquery怎么设置文本框只读
    4162阅读
    方法:1、利用“$(input元素)”语句获取文本框元素对象;2、利用attr()方法设置文本框只读,将readonly属性值设置为readonly即可,语法为“文本框元素对象.attr("readonly","readonly")”。本教程操作环境:windows1...

如本文对您有帮助,随意赞赏一下!