input[type=file] 的 change 事件里能拿到 File 对象（含 name、size、type、lastModified）。FileReader 提供四种读取方式：readAsText 读文本、readAsDataURL 读成 Base64（做图片预览最常用）、readAsArrayBuffer 读二进制、readAsBinaryString 已不推荐。
读取是异步的：监听 onload 拿 result，onerror 处理失败，onprogress 跟踪大文件进度。上传前用 readAsDataURL 即时预览图片、用 readAsText 解析 CSV 是最典型的两个场景。注意大文件别一次性读成 Base64，内存占用约为原文件的三分之四倍。
<style> .box { width: 300px; border: 1px solid #4a9eff; border-radius: 10px; padding: 12px; } .box img { max-width: 100%; margin-top: 10px; border-radius: 8px; display: none; } .tip { margin-top: 8px; color: #888; font-size: 13px; } </style> <div class="box"> <input type="file" accept="image/*" onchange="var f=event.target.files[0]; if(!f) return; var r=new FileReader(); r.onload=function(e){var img=document.querySelector('.box img'); img.src=e.target.result; img.style.display='block';}; r.readAsDataURL(f);"> <div class="tip">选择一张图片，FileReader 立即读成 Base64 并预览</div> <img alt="预览图"> </div>