HTML5实现本地图片预览及上传

"本地上传图片文档" 在Web开发中，用户经常需要上传图片作为其内容的一部分，例如社交媒体平台、博客、论坛等。H5（HTML5）提供了一种方便的方法来实现这一功能。本示例展示了如何使用HTML5的File API实现本地图片的选取和预览，主要涉及以下几个关键知识点： 1. **FileReader API**: 这是HTML5引入的一个新特性，允许JavaScript读取用户设备上的文件。在这个例子中，`FileReader`用于读取用户选择的图片，并将其转换为数据URL，以便在页面上预览。 2. **HTML5 `<input type="file">`**: 这个元素让用户能够从本地文件系统选择文件。当用户选择文件后，`onchange`事件被触发，可以调用相应的处理函数，如这里的`imgPreview(this)`。 3. **JavaScript 函数 `imgPreview(fileDom)`**: 这是处理图片预览的核心函数。它首先检查浏览器是否支持`FileReader`，如果不支持则给出提示。接着，获取用户选择的第一个文件（`fileDom.files[0]`），并验证其类型是否为图片（通过正则表达式`/^image\//`匹配）。 4. **FileReader 的 `readAsDataURL()` 方法**: 这个方法读取文件的内容并返回一个包含文件数据的data URL，可以作为`<img>`标签的`src`属性值，从而在页面上显示图片。 5. **HTML5 `<img>` 标签**: 在预览过程中，`<img>`标签的`src`属性被设置为`FileReader`的`onload`事件处理函数返回的data URL，这样图片就被加载到页面上了。 6. **CSS 样式**: 示例中的CSS用于美化图片预览区域，`#btn_img`定义了图片的初始尺寸和位置，而`#telphonenumber`则用于隐藏实际的文件输入控件，使其看起来像一个图片按钮。 7. **事件处理**: `onchange`事件绑定在`<input type="file">`上，当用户选择文件时触发`imgPreview`函数。这样，用户选择图片后，页面会立即显示所选图片的预览，提供了良好的用户体验。 这个简单的示例展示了如何使用HTML5和JavaScript实现本地图片上传预览功能，适用于各种需要用户上传图片的Web应用。注意，实际应用中可能还需要考虑文件大小限制、多文件上传、错误处理以及与服务器的交互等更复杂的情况。