javascript如何操作文件和流_怎样实现文件上传和预览【教程】

用 input[type="file"] 获取文件对象需监听 change 事件，通过 event.target.files[0]（单文件）或遍历 files（多文件）获取 File 实例；File 继承 Blob，含 name、size 等只读属性，files 是实时快照，替换文件需重新监听 change。

JavaScript 在浏览器中无法直接操作文件系统，File 和 FileReader 是唯二安全、标准的入口；上传必须走 FormData + fetch 或 XMLHttpRequest；预览依赖 URL.createObjectURL()，不是读取内容本身。

怎么用 input[type="file"] 拿到文件对象

用户选择文件后，input 元素的 files 属性返回 FileList（类数组），每个项是 File 实例（继承自 Blob）：

• File 有 name、size、type、lastModified 等只读属性，不能修改路径或伪造内容
• 单文件上传常用 input.files[0]；多文件需遍历 input.files
• 若设置 multiple 属性但用户只选一个，files.length 仍是 1，不会报错
• 注意：files 是实时的“快照”，后续替换文件会更新，但不会触发新事件——得监听 change 事件重新取

怎样用 FileReader 读取文件内容并预览

预览图片/文本等本地文件，不需要上传服务器也能完成，核心是 FileReader + URL.createObjectURL()：

• 读取图片推荐用 URL.createObjectURL(file)，生成临时 blob URL，赋给 —— 快、不占内存、支持大图
• 读取文本内容（如 JSON、CSV）才用 FileReader.readAsText()，注意指定编码（默认 UTF-8）
• FileReader 是异步的，必须绑定 onload 回调取 reader.result，别在 readAsXXX() 后立即访问 result
• 用完 createObjectURL 生成的 URL 后，应调用 URL.revokeObjectURL() 释放引用，否则可能内存泄漏

如何通过 fetch 上传文件到后端

浏览器上传本质是发送 multipart/form-data 请求，FormData 自动处理边界和编码：

立即学习“Java免费学习笔记（深入）”；

• 创建 FormData 实例，用 .append('field', file) 添加文件；字段名（'field'）要和后端约定一致
• 可追加其他字段，如 form.append('desc', '用户头像')，后端能一并接收
• 直接 fetch('/upload', { method: 'POST', body: form

  

  }) 即可，不用设 Content-Type 头——fetch 会自动设置带 boundary 的 multipart
• 如果后端要求 JSON 格式传文件（不推荐），需先用 FileReader.readAsArrayBuffer() 转为 ArrayBuffer，再转 Uint8Array 或 Base64，但会显著增大体积、增加解析开销

常见错误和兼容性注意点

很多“上传失败”或“预览空白”问题都源于这几个细节：

• input 元素未绑定 change 事件，或事件回调里没检查 event.target.files.length > 0 就直接取 [0]，导致 undefined 错误
• 用 FileReader 读取大文件时没监听 onprogress，用户无反馈；也没处理 onerror，静默失败
• 上传图片后端返回成功，但前端没清空 input.value = ''，下次选相同文件不会触发 change 事件（因为值没变）
• URL.createObjectURL() 在 Safari 旧版本或某些 WebView 中对非图片类型支持不稳定，文本/ PDF 预览建议降级为下载或服务端渲染

真正卡住人的往往不是语法，而是这些隐式状态和生命周期管理——比如忘记 revoke、没清空 input、把 blob URL 当作永久地址缓存。动手前先确认你是在读、预览，还是上传，三者路径完全不同。

# 后端  # 也能  # safari  # 你是  # 上传  # 不需要  # 绑定  # 也没  # 浏览器  # app  # 清空  # input  # js  # json  # 对象  # javascript  # java  # 编码  # 异步  # 事件  # Event  # 回调  # 前端  # 继承  # 遍历  # csv  # pdf  # undefined  # Length  # webview  # append 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】