前端Wiki/HTML5/进阶/拖拽与文件

FileReader 文件读取

FileReader 让网页在不上传服务器的前提下读取本地文件。入口通常是 <input type="file"> 的 change 事件：从 e.target.files 拿到 File 对象（本质是 Blob），交给 FileReader 读取。

按用途选读取方式：readAsText(file, 编码) 读文本内容（预览 .txt/.md/.csv）；readAsDataURL(file) 读成 base64 字符串，可直接赋给 img 的 src 做本地图片预览；readAsArrayBuffer(file) 读二进制，配合文件解析库使用。读取是异步的，结果在 onload 事件的 reader.result 里，出错走 onerror。

拖放与 FileReader 是黄金搭档：drop 事件里 e.dataTransfer.files 就是用户拖进来的文件列表，同样交给 FileReader 处理。文件只在本地内存中流转，隐私性好，但要记得大文件读 base64 很占内存。

本节要点File → FileReader → onload 里取 result，全程异步；读文本用 readAsText、图片预览用 readAsDataURL；拖进来的文件在 e.dataTransfer.files 里，两种入口同一套读法。

HTML

<input type="file" id="file" accept=".txt,.md">
<pre id="out">文件内容会显示在这里</pre>
<script>
  document.getElementById('file').addEventListener('change', function (e) {
    var file = e.target.files[0];       // 用户选中的第一个文件
    if (!file) return;

    var reader = new FileReader();
    reader.onload = function () {
      // 读取完成后，内容在 reader.result
      document.getElementById('out').textContent = reader.result;
    };
    reader.onerror = function () {
      document.getElementById('out').textContent = '读取失败';
    };
    reader.readAsText(file, 'utf-8');   // 按文本方式读取
  });

  // 图片预览场景改用：reader.readAsDataURL(file)
  // 然后 img.src = reader.result（base64 数据，可直接显示）
</script>

🔗 相关词条input 网页异步列表拖放事件

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读