通过File API实现文件预览，1. 图片用FileReader读取为base64并赋值img标签；2. 文本文件读取内容显示在pre中；3. pdf通过embed标签预览；4. 支持多文件与类型判断，提升用户体验。

在现代Web应用中，用户上传文件前往往希望先预览内容，比如图片、PDF、文本文件等。javaScript结合html5的File API可以高效实现本地文件的预览功能，无需上传到服务器即可查看文件内容。

1. 图片文件预览

通过FileReader读取用户选择的图片文件，并将其转换为base64格式的URL，赋值给标签的src属性，即可实现即时预览。

示例代码：

<input type="file" accept="image/*" id="imageInput"> <img id="preview" src="" alt="预览图" style="max-width: 300px; margin-top: 10px;">  <script> document.getElementById('imageInput').addEventListener('change', function(e) {   const file = e.target.files[0];   if (file && file.type.startsWith('image/')) {     const reader = new FileReader();     reader.onload = function(evt) {       document.getElementById('preview').src = evt.target.result;     };     reader.readAsDataURL(file);   } }); </script>

2. 文本文件预览（txt、csv等）

使用FileReader读取文本类文件内容，将结果展示在或</p> <div>中。</p> <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> <p><strong>实现方式：</strong></p> <ul> <li>监听文件输入变化，获取文件<a href="https://seo.xlycwl.com/tag/%e5%af%b9%e8%b1%a1"><b>对象</b></a></li> <li>调用readAsText方法读取内容</li> <li>将结果插入页面指定区域</li> </ul> <p><strong>示例代码：</strong></p> <div style="position:relative; padding:0px; margin:0px;"> <pre><input type="file" accept=".txt,.<a href="https://seo.xlycwl.com/tag/csv"><b>csv</b></a>" id="textInput"> <pre id="textContent" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px; height: 200px; <a href="https://seo.xlycwl.com/tag/overflow"><b>overflow</b></a>: auto;"></pre> <script> document.getElementById('textInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(evt) { document.getElementById('textContent').textContent = evt.target.result; }; reader.readAsText(file, 'UTF-8'); } }); </script></pre> <div></div> </div> <h3>3. PDF文件预览</h3> <p><a >浏览器</a>原生支持PDF预览，可借助<font color="#0066cc"><embed></font>或<font color="#0066cc"><<a href="https://seo.xlycwl.com/tag/iframe"><b>iframe</b></a>></font>标签显示PDF内容。</p> <div> <a href="https://www.php.cn/ai/%E8%B6%85%E8%83%BD%E6%96%87%E7%8C%AE"> <img decoding="async" title="JavaScript实现文件预览功能_javascript文件操作" alt="JavaScript实现文件预览功能_javascript文件操作" src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d08a9c409895.png" alt="JavaScript实现文件预览功能_javascript文件操作"></a> </p> <div> <a href="https://www.php.cn/ai/%E8%B6%85%E8%83%BD%E6%96%87%E7%8C%AE">超能文献</a> </p> <p>超能文献是一款革命性的AI驱动医学文献搜索引擎。</p> <div> <img decoding="async" title="JavaScript实现文件预览功能_javascript文件操作" alt="JavaScript实现文件预览功能_javascript文件操作" src="https://www.php.cn/static/images/card_xiazai.png" alt="JavaScript实现文件预览功能_javascript文件操作"><span>14</span> </div> </p></div> <p> <a href="https://www.php.cn/ai/%E8%B6%85%E8%83%BD%E6%96%87%E7%8C%AE"> <span>查看详情</span> <img decoding="async" title="JavaScript实现文件预览功能_javascript文件操作" alt="JavaScript实现文件预览功能_javascript文件操作" src="https://www.php.cn/static/images/cardxiayige-3.png" alt="JavaScript实现文件预览功能_javascript文件操作"></a> </div> <p><strong>实现方法：</strong></p> <ul> <li>使用FileReader读取PDF为数据URL</li> <li>将结果设置为embed的src属性</li> </ul> <p><strong>示例代码：</strong></p> <div style="position:relative; padding:0px; margin:0px;"> <pre><input type="file" accept=".pdf" id="pdfInput"> <embed id="pdfPreview" src="" type="<a href="https://seo.xlycwl.com/tag/app"><b>app</b></a>lication/pdf" style="width: 100%; height: 500px; margin-top: 10px;"> <script> document.getElementById('pdfInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (file && file.type === 'application/pdf') { const reader = new FileReader(); reader.onload = function(evt) { document.getElementById('pdfPreview').src = evt.target.result; }; reader.readAsDataURL(file); } }); </script></pre> <div></div> </div> <h3>4. 多文件与类型判断</h3> <p>实际开发中常需支持多种文件类型，可通过file.type或file.name扩展名判断类型，分发不同预览逻辑。</p> <p><strong>建议处理流程：</strong></p> <ul> <li>遍历用户选择的多个文件</li> <li>根据MIME类型或后缀名区分处理</li> <li>对不支持的格式给出提示</li> </ul> <p>例如判断PDF：<code>file.type === 'application/pdf'</code> 或 <code>file.name.endsWith('.pdf')</code></p> <p>基本上就这些。利用FileReader和现代<a href="https://seo.xlycwl.com/tag/%e6%b5%8f%e8%a7%88%e5%99%a8"><b>浏览器</b></a>的内建能力，<a >前端</a>就能完成大多数常见文件的预览，提升用户体验的同时减少服务器压力。注意处理大文件时的性能问题，必要时限制文件大小。</p> </p></div> <p>

以上就是javascript实现文件预览功能_