上一篇
fileapijs回应怎么用，是什么意思
什么是 File API
File API 是浏览器提供的一组 JavaScript 接口，用于在网页中读取本地文件内容，用户通过 <input type="file"> 或拖拽操作选择文件后，脚本可以获取文件信息、读取文件内容，并上传或处理文件。
核心对象
| 对象 | 用途 |
|---|---|
| File | 代表单个文件，包含文件名、大小、MIME 类型等属性。 |
| FileList | 表示用户选择的文件列表，可通过文件输入框的 files 属性获取。 |
| FileReader | 异步读取文件内容，支持读取为文本、DataURL、ArrayBuffer 等格式。 |
| Blob | 文件的基础数据类型，File 继承自 Blob，可用于切片、生成 URL 等操作。 |
基本用法示例
获取文件信息
constfileInput=document.getElementById('fileInput'); fileInput.addEventListener('change',(event)=>{ constfileList=event.target.files; for(constfileoffileList){ console.log('文件名:',file.name); console.log('大小:',file.size,'bytes'); console.log('类型:',file.type); console.log('最后修改时间:',newDate(file.lastModified)); } });
读取文件内容
使用 FileReader 读取文本文件内容：
constreader=newFileReader(); reader.onload=(e)=>{ constcontent=e.target.result; document.getElementById('output').textContent=content; }; reader.readAsText(file);//也可使用readAsDataURL,readAsArrayBuffer等
读取图片并预览
reader.onload=(e)=>{ constimg=document.createElement('img'); img.src=e.target.result; document.body.appendChild(img); }; reader.readAsDataURL(file);
使用 Blob URL 生成临时下载链接
consturl=URL.createObjectURL(file); consta=document.createElement('a'); a.href=url; a.download=file.name; a.click(); URL.revokeObjectURL(url);//释放内存
注意事项
File API 仅在用户主动操作（如点击、拖拽）后生效，不能由脚本自动触发文件选择。
读取大文件时可能造成性能问题,可使用 Blob.slice() 分片读取。
部分浏览器对 FileReader 的读取速率有限制，建议异步处理。
安全问题：文件内容仅在客户端可见，上传到服务器需额外处理。
相关问题与解答
问题1：如何读取二进制文件并将其转换为 ArrayBuffer？
解答：使用 FileReader.readAsArrayBuffer() 方法，读取完成后，结果在 reader.result 中以 ArrayBuffer 形式提供。
reader.readAsArrayBuffer(file); reader.onload=()=>{ constbuffer=reader.result; //进行二进制操作，如使用DataView或TypedArray };
问题2：如何限制用户只能选择特定类型的文件？
解答：在 <input type="file"> 中使用 accept 属性，只允许选择图片文件：accept="image/"，也可以指定具体 MIME 类型，如 accept=".pdf,.doc"，在 JavaScript 中可进一步验证 file.type 或 file.name 的扩展名，但需注意用户可能杜撰文件类型。
