学习File API用于前端读取文件-优快云博客

本文链接：https://blog.youkuaiyun.com/xiexingxi/article/details/75825496

本文介绍了HTML5的File API，详细讲解了如何读取文件，包括一次读取多个文件、通过拖拽读取图片文件，并给出了相关示例。同时，探讨了不同浏览器对File API的支持情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. File API简介

File API对于某些专门的网站的不可或缺的。现在常用它实现对文件的预览等功能。

File API规定怎么从硬盘上提取文件，直接交给在网页中运行中的Javascript代码。然后代码可以打开文件探究数据，无论是本地文件还是其他文件。注意，关键在于文件会被直接交给JavaScript代码，它并不能修改文件，也不能创建新文件，想要保存任何数据，需要将数据发送到服务器或者保存在本地存储空间中。

2. 读取文件

在通过File API操作文件之前，首先必须取得文件。使用File API可以直接读取文本文件的内容。
例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文件上传</title>
    <style>
        #fileOutput {
            border:1px grey solid;
            width: 500px;
        }
    </style>
</head>
<body>
    <input type="file" id="fileInput" onChange="processFiles(this.files)">
    <div id="fileOutput"></div>
<script>
    function processFiles(files) {
    
    //每个文件对象都有三个有用的属性：name属性保存文件名，size属性保存文件的字节大小，type保存文件的MEMI类型