知识问答
如何实现HTML5中图片预览功能？
HTML5 提供了多种方法来实现图片预览功能，其中最常用和有效的两种方法是使用 FileReader API 和 URL.createObjectURL()，下面将详细介绍这两种方法，并给出相应的代码示例。
方法一：使用 FileReader API
FileReader API 允许 Web 应用程序异步读取存储在用户计算机上的文件（包括图片），下面是一个简单的实例，演示如何使用 FileReader API 实现图片预览功能。
代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <title>FileReader API 图片预览</title> <style> #prev1 { height: 400px; width: 100%; } img { height: 100%; } </style></head><body> <p id="prev1"> <input type="file" id="file1" accept="image/*"> <br> <img src="" alt="" id="view1"> </p> <ｓｃｒｉｐｔ> document.getElementById("file1").addEventListener('change', function(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { document.getElementById('view1').src = e.target.result; }; reader.readAsDataURL(file); }); </ｓｃｒｉｐｔ></body></html>在这个例子中，当用户选择一张图片后，FileReader 会读取该文件并将其转换为 Data URL，然后将这个 Data URL 设置为<img> 标签的src 属性，从而实现图片预览。
方法二：使用 URL.createObjectURL()
URL.createObjectURL() 方法能够生成一个表示所选文件对象的临时 URL，这个方法比 FileReader 更简单，因为它不需要读取文件内容，以下是使用 URL.createObjectURL() 实现图片预览的示例代码。
代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF8"> <title>URL.createObjectURL() 图片预览</title> <style> #prev2 { height: 400px; width: 100%; } img { height: 100%; } </style></head><body> <p id="prev2"> <input type="file" id="file2" accept="image/*"> <br> <img src="" alt="" id="view2"> </p> <ｓｃｒｉｐｔ> document.getElementById("file2").addEventListener('change', function(event) { var file = event.target.files[0]; var url = URL.createObjectURL(file); document.getElementById('view2').src = url; }); </ｓｃｒｉｐｔ></body></html>在这个例子中，当用户选择一张图片后，我们直接创建一个表示该文件的 URL，并将这个 URL 设置为<img> 标签的src 属性，从而实现图片预览。
对比与归纳
| 方法 | 优点 | 缺点 | 适用场景 |
| FileReader API | 可以读取文件的内容并进行进一步处理 | 需要更多的代码和处理步骤 | 需要对文件内容进行复杂处理的场景 |
| URL.createObjectURL() | 实现简单，代码量少 | 不支持 IE 浏览器 | 仅需要显示文件内容的场景 |
FAQs
Q1: 为什么使用 FileReader API 实现图片预览时，有时会出现图片无法显示的情况？
A1: 如果在使用 FileReader API 时出现图片无法显示的情况，可能是由于以下原因：1. 文件类型不正确，确保选择的是图片文件；2. 读取文件过程中发生错误，可以在 FileReader 的错误事件处理函数中添加日志或提示信息来排查问题。
Q2: URL.createObjectURL() 方法有什么局限性？
A2: URL.createObjectURL() 方法的主要局限性在于它生成的 URL 是临时的，页面刷新或关闭后会自动失效，该方法在 Internet Explorer 浏览器中不受支持，因此在跨浏览器兼容性要求较高的项目中需谨慎使用。
| 特性 | 描述 | 示例代码 |
| | | |
| 图片预览功能 | 用户可以点击图片来预览其大图，通常用于商品展示或图片库。 | 使用`