在web页面上使用文件,对象详解

2020-05-07 作者:网站首页   |   浏览(64)

时间: 2019-12-18阅读: 81标签: 对象

File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容。

File对象、FileList对象与FileReader对象大家或许不太陌生,常见于文件上传下载操作处理(如处理图片上传预览,读取文件内容,监控文件上传进度等问题)。

File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的DataTransfer对象。File对象是一种特殊的Blob,它能够在任何能够使用Blob的上下文中使用。

那么本文将与大家深入介绍两者。

要在web页面中使用文件,通常需要涉及到的对象有:File对象,FileList对象,FileReader对象。

一、File 对象1. 概念介绍

FileList对象

FileList来自于两个地方,分别是input元素的files属性以及drag and drop API(当拖动文件时,event.DataTransfer.files就是一个FileList对象)

 

<input id="fileItem" type="file">

 

var fileList = document.getElementById('fileItem').files

File对象提供有关文件的信息,并允许网页中的 JavaScript 读写文件。

FileList对象的标准属性

length:这个一个只读属性,这个属性返回FileList对象中包含的File对象的长度。

最常见的使用场合是表单的文件上传控件,用户在一个input type="file"元素上选择文件后,浏览器会生成一个数组,里面是每一个用户选中的文件,它们都是File实例对象。

FileList对象的标准方法

item(index):取得FileList对象中指定位置的File对象。它可以用数组索引的形式去简写

另外值得提到一点:File对象是一种特殊Blob对象,并且可以用在任意的Blob对象的context中。比如说,FileReader,URL.createObjectURL(),createImageBitmap(), 及XMLHttpRequest.send()都能处理Blob和File。

File对象

FileList对象的每一项都是File对象。File对象是一种特殊的Blob。

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

File对象的标准属性

1.lastModified:返回文件被修改的时间,这个时间是距离1970年1月1日0点0时0分经过的毫秒数。是一个只读属性

2.name:返回文件对象引用的文件的文件名,这是一个只读属性

3.type:返回文件对象引用的文件的文件类型,是MINE type,这个是一个只读属性。

4.size:返回文件对象引用的文件的文件大小,这个一个只读属性。

  1. 对象使用

File对象的标准方法

没有给File对象单独定义方法,但是它有从Blob对象那儿继承来的方法。

浏览器原生提供一个File()构造函数,用来生成File实例对象。

FileReader对象

FileReader对象使web应用能够异步读取用户计算机上的文件。

FileReader()是一个构造函数,通过它可以创建一个新的FileReader对象。

 

var fileReader = new FileReader();

 

constmyFile =newFile(bits, name[, options]);

FileReader对象的标准属性

1.error:返回文件读取过程中发生的错误。

2.result:返回文件的内容,返回值得类型是String或者ArrayBuffer。这个属性只有在读取操作完成之后才是合法的。

3.readyState:返回读取操作当前的状态,可能的取值是0:还没有开始读取,1:正在读取,2:读取完成。

参数:

FileReader对象的标准方法

1.abort():中断读取操作。readyState的值变成2.

2.readAsArrayBuffer(Blob):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的ArrayBuffer。

3.readAsDataURL(Blob):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的URL,并且数据格式是base64编码的字符串

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

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);
  }
}

4.readAsText(Boob,encoding):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的文本字符串。第二个参数是可选的,它用于指定result属性中文本字符串的编码方式,默认为UTF-8。

bits:

FileReader对象的事件

1.abort:终止读取操作时触发。

2.error:读取操作过程中遇到错误时触发。

3.load:读取操作成功的完成时触发。

4.loadend:读取操作结束时触发。不能是读取成功还是读取失败。

5.loadStart:读取操作开始时触发。

6.process:读取过程中触发。

一个数组,表示文件的内容。成员可以是ArrayBuffer,ArrayBufferView,Blob,或者DOMString对象的Array,或者任何这些对象的组合。

在web应用中使用文件

使用HTML5中的文件对象,可以访问选择的本地文件,并且读取这些文件中的内容。文件对象要么来自于input元素,要么来自于drag and drop接口。

通过这个参数,也可以实现ArrayBuffer,ArrayBufferView,Blob转换为File对象。

通过input元素选择文件

<input type="file" id="input">

访问通过input选择的文件

var selectedFile = document.getElementById('input').files[0];

上述代码段一次只能选择一个文件,如果一次要选择多个文件,就需要给input元素添加一个multiple属性,并将multiple属性设置我true。在Gecko 1.9.2之前不支持一次选择多个文件。

name:

通过drag and drop接口选择文件

关于drag and drop接口可以查看HTML5 DragEvent。

第一步:创建一个放置区域。一个普通的元素,如div,p等。

第二步:给放置区添加drop,dragenter,dragover事件处理程序。其中起关键作用的是drop事件处理程序。

下面是一个显示缩略图的例子:

<div id='dropbox' class='dropbox'></div>

.dropbox{
 border:solid 3px red;
 height:400px;
 width:auto;      
}

var dropbox;

dropbox = document.getElementById("dropbox");
//注册事件处理程序
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

function handleFiles(files) {
  for (var i = 0; i < files.length; i  ) {
    var file = files[i];
    var imageType = /^image//;

    if (!imageType.test(file.type)) {
      continue;
    }

    var img = document.createElement("img");
    img.file = file;
    dropBox.appendChild(img); 

    var reader = new FileReader();
    reader.onload =  function() {
        img.src = reader.result; 
        };
    reader.readAsDataURL(file);
  }
}    

 

字符串,表示文件名或文件路径。

options:

配置对象,设置实例的属性。该参数可选。可选值有如下两种:

type:DOMString,表示将要放到文件中的内容的 MIME 类型。默认值为""。lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为Date.now()。

示例:

constmyFile =newFile(['leo1','leo2'],'leo.txt', {type:'text/plain'});

根据已有的 blob 对象创建 File 对象:

constmyFile =newFile([blob],'leo.png', {type:'image/png'});
  1. 实例属性和方法3.1 实例属性

实例有以下几个属性:

File.lastModified:最后修改时间。只读

自 UNIX 时间起始值(1970年1月1日 00:00:00 UTC)以来的毫秒数

File.name:文件名或文件路径。只读

出于安全考虑,返回值不包含文件路径 。

File.size:文件大小(单位字节)。只读File.type:文件的 MIME 类型。只读

// HTML 代码如下// input type="file"const myFile = document.getElementById('fileItem')myFile.addEventListener('change', function(e){ const file = this.files[0]; console.log(file.name); console.log(file.size); console.log(file.lastModified); console.log(file.lastModifiedDate);});

3.2 实例方法

File对象没有定义任何方法,但是它从 Blob 接口继承了以下方法:

Blob.slice([start[, end[, contentType]]])

返回一个新的Blob对象,它包含有源Blob对象中指定范围内的数据。

  1. 兼容性二、FileList 对象1. 概念介绍

FileList对象是一个类数组对象,每个成员都是一个File实例,主要出现在两种场合:

通过input type="file"控件的files属性,返回一个FileList实例。

另外,当input元素拥有multiple属性,则可以用它来选择多个文件。

通过拖放文件,查看DataTransfer.files属性,返回一个FileList实例。

// HTML 代码如下// input type="file"const files = document.getElementById('fileItem').files;files instanceof FileList // trueconst firstFile = files[0];
  1. 对象使用

所有type属性为file的input元素都有一个files属性,用来存储用户所选择的文件. 例如:

  1. 实例属性和方法3.1 实例属性

实例只有一个属性:

FileList.length:返回列表中的文件数量。只读3.2 实例方法

实例只有一个方法:

FileList.item():用来返回指定位置的实例,从 0 开始。

由于FileList实例是个类数组对象,可以直接用方括号运算符,即myFileList[0]等同于myFileList.item(0),所以一般用不到item()方法。

  1. 兼容性5. 实例

选择多个文件,并获取每个文件信息:

// HTML 代码如下// input multiple type="file"const myFile = document.querySelector("#myfiles");myFile.addEventListener('change', function(e){ let files = this.files; let fileLength = files.length; let i = 0; while ( i  fileLength) { let file = files[i]; console.log(file.name); i  ; } });

三、FileReader 对象1. 概念介绍

FileReader对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据。

简单理解,就是用于读取File对象或Blob对象所包含的文件内容。

  1. 对象使用

浏览器原生提供一个FileReader构造函数,用来生成FileReader实例。

constreader =newFileReader();
  1. 实例属性和方法

FileReader对象拥有的属性和方法较多。

3.1 实例属性FileReader.error: 表示在读取文件时发生的错误。只读FileReader.readyState: 整数,表示读取文件时的当前状态。只读

共有三种状态:0 : EMPTY,表示尚未加载任何数据;1 : LOADING,表示数据正在加载;2 : DONE,表示加载完成;

FileReader.result读取完成后的文件内容。只读

仅在读取操作完成后才有效,返回的数据格式取决于使用哪个方法来启动读取操作

3.2 事件处理FileReader.onabort: 处理abort事件。该事件在读取操作被中断时触发。FileReader.onerror: 处理error事件。该事件在读取操作发生错误时触发。FileReader.onload: 处理load事件。该事件在读取操作完成时触发。FileReader.onloadstart: 处理loadstart事件。该事件在读取操作开始时触发。FileReader.onloadend: 处理loadend事件。该事件在读取操作结束时(要么成功,要么失败)触发。FileReader.onprogress: 处理progress事件。该事件在读取Blob时触发。3.3 实例方法FileReader.abort():终止读取操作,readyState属性将变成2。FileReader.readAsArrayBuffer():以ArrayBuffer的格式读取文件,读取完成后result属性将返回一个ArrayBuffer实例。FileReader.readAsBinaryString():读取完成后,result属性将返回原始的二进制字符串。FileReader.readAsDataURL():读取完成后,result属性将返回一个 Data URL 格式(Base64 编码)的字符串,代表文件内容。

对于图片文件,这个字符串可以用于img元素的src属性。注意,这个字符串不能直接进行 Base64 解码,必须把前缀data:*/*;base64,从字符串里删除以后,再进行解码。

FileReader.readAsText():读取完成后,result属性将返回文件内容的文本字符串。

该方法的第一个参数是代表文件的 Blob 实例,第二个参数是可选的,表示文本编码,默认为UTF-8。

  1. 兼容性5. 实例

这里举一个图片预览的实例:

/* HTML 代码如下 input type="file" onchange="previewFile()" img src="" height="200"*/function previewFile() { let preview = document.querySelector('img'); let file = document.querySelector('input[type=file]').files[0]; let reader = new FileReader(); reader.addEventListener('load', function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); }}

四、参考资料《File 对象,FileList 对象,FileReader 对象》MDN本文首发在pingan8787个人博客

本文由yzc216亚洲城发布于网站首页,转载请注明出处:在web页面上使用文件,对象详解

关键词: yzc216亚洲城