HTML5实现预览本地图片

在网页设计中，我们常常面临一个挑战：如何在用户未提交表单至服务器之前，读取并处理上传的图片内容。一个典型的场景是，我们有一个HTML图片上传控件，其代码如下所示：

```html

```

这个控件中的 `accept="image/"` 属性至关重要，它确保了用户只能选择图片进行上传。这一设置在移动端尤其重要，它能影响系统的弹窗选择类型。

以往，在不提交表单到服务器的情况下，我们无法直接读取图片内容。随着HTML5的推出，这一功能得以通过FileReader轻松实现。下面是一个具体的例子：

当文件选择发生变化时，我们会获取到文件的HTML5对象，并对其进行一系列操作。我们通过监听input元素的change事件来获取上传的文件对象。然后，我们可以检查文件的大小，以确保它不超过我们设定的限制（例如2MB）。接着，我们可以利用window的URL工具从文件对象生成一个可用的图像URL。我们可以使用这个URL来创建一个标签并将其显示出来。整个过程的关键步骤如下：

1. 通过的change事件触发事件，获取event对象；

2. 通过event对象获取上传的文件的js对象file；

3. 使用window.URL工具从file对象生成一个可用的URL；

4. 使用这个URL来展示图像；

5. 当我们不再需要这个URL时，我们需要释放它所占用的内存。值得注意的是，对于同一个文件对象，每次调用URL.createObjectURL时都会生成一个新的URL。这个新的URL类似于这样：blob:http%3A//localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb。

简而言之，我们可以通过以上步骤在客户端处理上传的图片，而无需等待表单提交到服务器。这一切操作都是在客户端完成的，服务器对此一无所知。这种处理方式使得我们可以实时地对上传的图片进行验证、处理或展示，提升了用户体验。不过需要注意的是，虽然这个过程在客户端完成，但我们仍然需要确保服务器端的安全性和稳定性，以防止潜在的安全风险。