JavaScript实现文件预览功能_javascript文件操作

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

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

1. 图片文件预览

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

示例代码：

@@##@@

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

使用FileReader读取文本类文件内容，将结果展示在或<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> <p><strong>实现方式：</strong></p> <ul> <li>监听文件输入变化，获取文件对象</li> <li>调用readAsText方法读取内容</li> <li>将结果插入页面指定区域</li> </ul> <p><strong>示例代码：</strong></p> <pre class='brush:php;toolbar:false;'><input type="file" accept=".txt,.csv" id="textInput"> <pre class="brush:php;toolbar:false;" id="textContent" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px; height: 200px; overflow: 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><h3>3. PDF文件预览</h3> <p><a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>原生支持PDF预览，可借助<font color="#0066cc"><embed></embed></font>或<font color="#0066cc"><iframe></iframe></font>标签显示PDF内容。</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/11205" title="华友协同办公自动化OA系统"><img src="https://img.php.cn/upload/webcode/000/000/005/176533020231638.jpg" alt="华友协同办公自动化OA系统"></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/11205" title="华友协同办公自动化OA系统">华友协同办公自动化OA系统</a> <p>华友协同办公管理系统(华友OA)，基于微软最新的.net 2.0平台和SQL Server数据库，集成强大的Ajax技术，采用多层分布式架构，实现统一办公平台，功能强大、价格便宜，是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想，集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、</p> </div> <a href="/xiazai/code/11205" title="华友协同办公自动化OA系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><strong>实现方法：</strong></p> <ul> <li>使用FileReader读取PDF为数据URL</li> <li>将结果设置为embed的src属性</li> </ul> <p><strong>示例代码：</strong></p> <pre class='brush:php;toolbar:false;'><input type="file" accept=".pdf" id="pdfInput"> @@@###@@@ <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> <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 style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank">前端</a>就能完成大多数常见文件的预览，提升用户体验的同时减少服务器压力。注意处理大文件时的性能问题，必要时限制文件大小。<img id="preview" src="" alt="预览图" style="max-width:90%"><embed id="pdfPreview" src="" type="application/pdf" style="width: 100%; height: 500px; margin-top: 10px;"></embed></p> </div>