文件api_文件API

柔光的暖阳◎ 2023-02-22 03:40 2阅读 0赞

文件api

Working with file uploads, especially on the front end, was always a hassle.  We didn't use to be able to [drag and drop files][], complete AJAX uploads, provide multiple files, and hell, we couldn't get any information about the file until it hit the server; you'd need to upload the damn file before you could reject it!

处理文件上传，尤其是在前端，总是很麻烦。 我们过去不能[拖放文件][drag and drop files] ，完成AJAX上传，提供多个文件，而且，在文件到达服务器之前，我们无法获得有关该文件的任何信息。 您需要先上传该死的文件，然后才能拒绝该文件！

Nowadays we have the File API which provides us access to file information via JavaScript and an `input[type=file]` element.  Let's have a look at how the File API works!

如今，我们拥有File API，该API可让我们通过JavaScript和`input[type=file]`元素访问文件信息。 让我们看一下File API的工作原理！

## 访问文件 **(**Accessing Files**)** ##

To get the list of files mapped to a given `input[type=file]`, you use the `files` property:

要获取映射到给定`input[type=file]`的文件列表，请使用`files`属性：

// Assuming <input type="file" id="upload" multiple>
    
    var uploadInput = document.getElementById('upload');
    
    uploadInput.addEventListener('change', function() {
    	console.log(uploadInput.files) // File listing!
    });

Unfortunately the `FileList` doesn't have a `forEach` method like Array so we'll need to do some old school looping through the `FileList`:

不幸的是， `FileList`没有像Array这样的`forEach`方法，因此我们需要做一些古老的循环遍历`FileList` ：

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
      console.log(files[i]);
    }

It's important to note that `FileList` does have a `length` property.

重要的是要注意`FileList`确实具有`length`属性。

## 获取文件信息 **(**Getting File Information**)** ##

Each file in the `FileList` provides a good set of information on each file, including file size, MIME type, last modified date, and name:

`FileList`中的每个文件都提供了有关每个文件的一组很好的信息，包括文件大小，MIME类型，上次修改日期和名称：

{
    	lastModified: 1428005315000,
    	lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
    	name: "profile.pdf",
    	size: 135568,
    	type: "application/pdf",
    	webkitRelativePath: ""
    }

What's nice about getting this file information is that you can do some very basic validation before uploading the file.  For example, you can validate MIME type or total file size:

获得此文件信息的好处是，您可以在上传文件之前进行一些非常基本的验证。 例如，您可以验证MIME类型或文件总大小：

Total file size is too large or a file doesn't pass the test? Now you can present the user with a message without needing to upload and assess the file first.

文件总大小太大或文件未通过测试？ 现在，您可以向用户显示一条消息，而无需先上载和评估文件。

That's my quick look at the File API. It's a sweet little API that can save you and your user some wasted upload time. There's lots more than can be done with the file API, much of which you can find on [MDN][].

这就是我快速浏览File API的过程。 这是一个可爱的小API，可以为您和您的用户节省一些浪费的上传时间。 文件API可以做很多事情，您可以在[MDN上][MDN]找到很多。

> 翻译自: [https://davidwalsh.name/file-api][https_davidwalsh.name_file-api]

文件api

[drag and drop files]: https://davidwalsh.name/resize-image-canvas
[MDN]: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
[https_davidwalsh.name_file-api]: https://davidwalsh.name/file-api