HTML5通过<input type="file">触发文件选择对话框，再用FileReader异步读取内容，支持多文件、类型过滤与进度监控，严禁直接访问本地路径。
点击按钮触发文件选择对话框，而不是直接读取本地文件
浏览器出于安全限制，HTML 按钮无法直接访问或执行本地文件系统路径（比如 import data.json 或 fs.readFile('./config.txt')）。所谓“导入”，实际是让用户主动选择文件，再由 JavaScript 读取其内容。按钮的作用只是调起 <input type="file"> 的原生选择器。
常见错误是试图用 onclick 直接调用 fetch('file:///...') 或拼接本地路径 —— 这会触发 CORS 错误或被浏览器静默拦截，且不同浏览器行为不一致（Chrome 尤其严格）。
- 必须用隐藏的
<input type="file">元素配合按钮触发click() - 按钮本身不能带
href或formaction指向本地路径 - 选中后需监听
input事件，通过FileReader或URL.createObjectURL()处理内容
用 label 包裹 input[type=file] 是最稳妥的触发方式
相比用 JS 调 input.click()，用 <label> 关联更可靠，避免移动端失焦、Safari 拒绝程序化触发等问题。
<label> <button type="button">导入 CSV</button> <input type="file" accept=".csv" style="display:none" onchange="handleFile(this.files[0])"> </label>
注意：accept 属性仅过滤文件类型提示，不校验内容；onchange 在用户真正选中文件后才触发（区别于 onclick）。
立即学习“前端免费学习笔记（深入）”；
- 不要用
click()触发input[type=file]在 iOS Safari 和部分 Android WebView 中可能无效 -
input必须在 DOM 中（不能display:none后又用 JS append），否则 Safari 会忽略 - 若需多次导入，每次选完要清空
input.value = ''，否则重复选相同文件不会再次触发onchange
读取文件内容时优先用 FileReader.readAsText() 而非 fetch()
用户选中的 File 对象是 Blob 子类，只能通过 FileReader 或 File.arrayBuffer() 读取。试图对 File 调用 fetch() 会失败 —— 因为它不是 URL，也不是可 fetch 的资源。
示例片段：
function handleFile(file) {
if (!file) return;
const reader = new FileReader();
reader.onload = e => {
try {
const data = JSON.parse(e.target.result); // 假设是 JSON
console.log(data);
} catch (err) {
console.error('解析失败：', err.message);
}
};
reader.onerror = () => console.error('读取失败');
reader.readAsText(file, 'UTF-8'); // 显式指定编码，避免中文乱码
}
-
readAsText()第二个参数必须是字符串（如'UTF-8'），不能写成utf8或省略（某些文件含 BOM 时会出错） - 大文件（>10MB）建议用
stream()+TextDecoder分块读，否则容易卡死主线程 - CSV/Excel 等结构化格式，不要手写解析 —— 用
PapaParse或xlsx库处理更稳
需要“导入后自动处理”时，别漏掉 MIME 类型校验
仅靠 accept=".json" 不可靠：用户可手动修改后缀名绕过。真实判断依据是 file.type（如 "application/json"）或文件头（magic bytes）。
例如检查 JSON 文件：
if (!file.type && !file.name.endsWith('.json')) {
alert('请上传 JSON 文件');
return;
}
// 更准的方式：读前 4 字节判断是否为 {" 或 [
const header = await file.slice(0, 4).arrayBuffer();
const view = new Uint8Array(header);
if (view[0] !== 0x7B && view[0] !== 0x5B) { // { or [
alert('文件内容不是有效的 JSON 格式');
return;
}
-
file.type在某些系统上为空（如 macOS 上传无扩展名文件），不能单独依赖 - 前端校验只是体验优化，敏感逻辑仍需服务端二次验证
- 用户拖拽文件到页面时，要用
drop事件替代click，并阻止dragover默认行为
FileReader 报错或解析乱码，用户只会觉得“按钮没反应”。 
