javaScript文件上传与预览核心是FileReader（本地读取预览）和FormData（提交服务器）。FileReader支持readAsDataURL、readAsText（需指定UTF-8编码防乱码）、readAsArrayBuffer；FormData通过append添加文件，fetch或XHR上传，无需手动设Content-Type。
javascript 实现文件上传和读取预览，核心在于 File API（尤其是 FileReader）与 FormData 的配合使用。前者负责本地读取和预览，后者负责将文件提交到服务器。
用 FileReader 读取文件并预览
适用于图片、文本等小文件的即时预览，不依赖服务器。
- 监听
<input type="file">的change事件，获取files[0] - 创建
new FileReader()实例 - 通过
readAsDataURL()（适合图片预览）、readAsText()（适合文本内容）、readAsArrayBuffer()（适合二进制处理）读取文件 - 在
onload回调中拿到结果，更新页面元素（如<img src="data:..." alt="JavaScript如何实现文件上传_JavaScript如何读取文件内容并预览" >或<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></code> 显示文本）</li> </ul> <p>示例（图片预览）：</p> <font color="#666"><pre class="brush:php;toolbar:false;">const input = document.querySelector('input[type="file"]'); input.addEventListener('change', (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { document.querySelector('#preview').src = reader.result; }; reader.readAsDataURL(file); });</pre></div> <h3>用 FormData 提交文件到服务器</h3> <p>实现真正的“上传”，需配合后端接口接收文件（如 express、PHP、spring Boot 等）。</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1508"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680205299315.png" alt="Med-PaLM"> </a> <div class="aritcle_card_info"> <a href="/ai/1508">Med-PaLM</a> <p>来自 Google Research 的大型语言模型，专为医学领域设计。</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="Med-PaLM"> <span>221</span> </div> </div> <a href="/ai/1508" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="Med-PaLM"> </a> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p> <ul> <li>创建 <code>new FormData()
- 用
append('fieldName', file)添加文件（字段名需与后端约定一致） - 可额外添加其他表单字段，如
formData.append('desc', '用户头像') - 用
fetch或XMLHttpRequest发送，注意不要设置Content-Type（浏览器会自动设为multipart/form-data并带上 boundary）
示例（fetch 上传）：
const file = document.querySelector('input[type="file"]').files[0]; const formData = new FormData(); formData.append('avatar', file); // 后端接收字段名为 avatar fetch('/upload', { method: 'POST', body: formData }) .then(res => res.json()) .then(data => console.log('上传成功:', data));
读取文本文件内容并显示（带编码处理）
中文文本文件若用 readAsText() 出现乱码，通常因未指定编码格式。
- 推荐显式传入编码：
reader.readAsText(file, 'UTF-8') - 支持常见编码如
'GBK'（需后端或用户明确告知），但浏览器原生只保证UTF-8和US-ASCII可靠 - 大文件建议分块读取或使用
stream+TextDecoder避免内存压力（高级场景）
注意事项与常见问题
- 安全限制：JS 无法直接读取文件路径（
file.path为空），仅能访问内容和元信息（name、size、type） - 跨域上传需服务端配置 CORS，如
access-Control-Allow-Origin - 大文件上传建议加进度条：监听
XMLHttpRequest.upload.onprogress或使用fetch配合ReadableStream（现代方案） - 多文件上传只需遍历
e.target.files数组，逐个 append 到 FormData
以上就是JavaScript如何实现文件上传_JavaScript如何读取文件内容并预览的详细内容，更多请关注php中文网其它相关文章！