使用File API可实现文件读取与上传,通过input选择文件,FileReader读取内容并预览;2. 支持图片预览、多文件处理及FormData异步上传。

HTML5 提供了强大的 File API,使得网页可以直接读取用户本地文件内容,无需依赖 Flash 或其他插件。通过 File API 配合表单元素,可以实现现代化的文件上传功能,包括实时预览、进度显示和多文件处理等。
1. 基本文件选择与读取
使用 可以让用户选择文件,再结合 JavaScript 中的 FileReader 对象读取文件内容。
示例代码:上述代码中,files 是一个类数组对象,包含用户选择的文件。调用 readAsText() 可读取文本文件(如 .txt、.json)。若要读取图片并预览,可使用 readAsDataURL()。
2. 图片上传预览实现
常见需求是上传图片前先预览。利用 FileReader 读取图片为 Data URL,赋值给 标签即可。
立即学习“前端免费学习笔记(深入)”;
示例代码:@@##@@
accept="image/*" 限制只选择图片文件,提升用户体验。
3. 多文件上传与信息展示
添加 multiple 属性支持选择多个文件,并遍历 files 列表进行处理。
示例代码:通过遍历 files,可以获取每个文件的 name、size、type 等属性,便于验证或展示。
4. 使用 FormData 实现异步上传
结合 FormData 和 fetch 可将文件发送到服务器。
示例代码:服务器端需配置对应接口接收 multipart/form-data 类型数据。
基本上就这些。File API 让前端能更灵活地处理文件操作,配合现代浏览器特性,可构建出流畅的上传体验。注意兼容性问题在主流浏览器中已基本无碍,但在低版本 IE 中不可用。











