js file对象|极客笔记

js file对象

1. 什么是File对象？

在Web开发中，File对象是用来处理用户上传文件的一种数据类型。它表示计算机文件系统的一个文件，并提供了一些与文件相关的功能和属性。

2. 创建File对象

2.1. 使用input元素

HTML中的<input>元素可以用来创建一个文件选择框，通过用户选择文件后，可以获取到文件的相关信息。例如：

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

通过JavaScript获取到该元素后，可以通过其files属性来访问用户选择的文件。例如：

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0]; // 获取所选文件的第一个文件对象
console.log(file);

这样，我们就创建了一个File对象，并将其赋值给变量file。我们可以在控制台中打印该对象，查看其属性。

2.2. 使用拖放

除了使用<input>元素外，我们还可以通过拖放文件来创建File对象。我们可以为一个元素添加dragover和drop事件监听器来实现拖放功能。例如：

<div id="dropArea" style="width: 300px; height: 300px; border: 2px dashed gray;">
  拖放文件到此区域
</div>

var dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragover', handleDragOver, false);
dropArea.addEventListener('drop', handleDrop, false);

function handleDragOver(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
}

function handleDrop(event) {
  event.preventDefault();
  var file = event.dataTransfer.files[0]; // 获取拖放文件的第一个文件对象
  console.log(file);
}

这样，当我们将一个文件拖放到#dropArea元素中时，就会创建一个对应的File对象，并将其赋值给file变量。

3. File对象的属性和方法

下面介绍一些常用的File对象属性和方法。

3.1. 属性

name：返回文件的名称（字符串类型）。
size：返回文件的字节大小（整数类型）。
type：返回文件的MIME类型（字符串类型）。

3.2. 方法

slice(start, end[, contentType])：返回一个新的File对象，它是当前File对象的一部分。start和end参数是整数，用于指定截取的字节范围。contentType参数是可选的，用于设置新File对象的MIME类型。示例代码如下：
```
var file = ...; // 创建一个File对象
var slice = file.slice(0, 1024); // 截取文件的前1024字节
console.log(slice);
```
webkitSlice(start, end[, contentType])：类似于slice方法，但只在旧版本的Webkit浏览器中适用。
mozSlice(start, end[, contentType])：类似于slice方法，但只在Firefox浏览器中适用。

4. File对象的应用

4.1. 读取文件内容

通过使用File对象的slice方法，我们可以将文件按照指定的字节范围分割为多个片段，并逐个读取这些片段的内容。下面是一个读取文件内容的示例代码：

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

var reader = new FileReader();
reader.onload = function(event) {
  var content = event.target.result;
  console.log(content);
};
reader.readAsText(file);

在上面的代码中，我们首先创建了一个FileReader对象，然后通过其onload事件监听器来获取读取完成后的内容。最后，调用readAsText方法，将文件对象传入，以开始读取文件内容。

4.2. 上传文件

一般情况下，我们可以通过表单的enctype属性设置为multipart/form-data来上传文件。通过将File对象传递给FormData对象，可以方便地构建表单数据，并使用XMLHttpRequest发送到服务器。以下是一个上传文件的示例代码：

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

var formData = new FormData();
formData.append('file', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function(event) {
  console.log('上传完成');
};
xhr.send(formData);

上面的代码中，我们首先使用FormData对象创建一个空的表单数据对象，并通过其append方法将File对象添加到表单中。然后，创建一个XMLHttpRequest对象，并通过其open方法指定请求的方法、URL和异步标志，再通过其send方法发送表单数据到服务器。