HTML5图片预览实例分享

HTML5图片预览的实现，主要依赖于两大方法：URL与FileReader。接下来，让我们通过一段具体的代码实例来深入理解这一过程。

这段代码是一个简单的HTML页面，用于实现图片的上传与预览功能。页面的头部设置了一些基本的样式，并引入了jQuery库以便更便捷地操作DOM元素。

主要的预览功能由两个函数实现，分别是preview1和preview2。

函数preview1利用了URL对象的createObjectURL方法，将选中的文件转换为URL，然后创建一个新的Image对象，并将其src属性设置为这个URL。当图片加载完成后，将图片添加到预览区域。这种方法在大部分浏览器中都能很好地工作，但需要注意的是，URL.revokeObjectURL方法在Opera浏览器中的支持并不完全。

函数preview2则是通过FileReader对象来读取文件。FileReader是HTML5中提供的一个功能强大的API，它允许网页异步读取在客户端存储的文件内容。在这个函数中，通过读取文件并将其以DataURL的形式返回，然后创建一个新的img元素并设置其src属性为这个DataURL，最后将img元素添加到预览区域。这个方法除了IE9及以下版本外，几乎所有的浏览器都支持。

在页面加载完成后，通过监听文件输入元素的change事件，当用户选择了一个新的文件后，调用preview1函数进行预览。

整个页面的结构非常简单，包含一个文件输入元素和一个用于显示预览的图片容器。

HTML5为我们提供了强大的文件处理功能，使得在网页上实现图片预览等功能变得更加简单。不过需要注意的是，不同的浏览器对于HTML5的支持程度可能会有所不同，因此在开发过程中需要根据实际情况进行适当的兼容性处理。

最后需要指出的是，虽然上述代码已经能够实现基本的图片预览功能，但在实际的项目中可能还需要考虑更多的因素，比如错误处理、文件类型验证、图片质量等。这就需要开发者根据具体的需求进行进一步的开发与优化。