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属性，即可实现即时预览。

示例代码：

<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读取文本类文件内容，将结果展示在或<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> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input type="file" accept=".txt,.csv" id="textInput"> <pre 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></pre><div class="contentsignin">登录后复制</div></div> <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></font>或<font color="#0066cc"><iframe></font>标签显示PDF内容。</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/%E8%B6%85%E8%83%BD%E6%96%87%E7%8C%AE"> <img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6d08a9c409895.png" alt="超能文献"></a> <div class="aritcle_card_info"> <a href="/ai/%E8%B6%85%E8%83%BD%E6%96%87%E7%8C%AE">超能文献</a> <p>超能文献是一款革命性的AI驱动医学文献搜索引擎。</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="超能文献"><span>14</span> </div> </div> <a href="/ai/%E8%B6%85%E8%83%BD%E6%96%87%E7%8C%AE" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="超能文献"></a> </div> <p><strong>实现方法：</strong></p> <ul> <li>使用FileReader读取PDF为数据URL</li> <li>将结果设置为embed的src属性</li> </ul> <p><strong>示例代码：</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><input type="file" accept=".pdf" id="pdfInput"> <embed id="pdfPreview" src="" type="application/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 class="contentsignin">登录后复制</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 style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank">前端</a>就能完成大多数常见文件的预览，提升用户体验的同时减少服务器压力。注意处理大文件时的性能问题，必要时限制文件大小。</p> </div>

以上就是JavaScript实现文件预览功能_javascript文件操作的详细内容，更多请关注php中文网其它相关文章！