html5 实现图片预览

在HTML5中，可以使用<input type="file">元素来选择图片，并使用JavaScript和FileReader对象来实现图片预览。以下是一个简单的实现示例：

HTML部分：

<input type="file" id="imageInput" accept="image/*" onchange="previewImage(this);" />
<img id="imagePreview" src="" alt="Image preview" />

JavaScript部分：

function previewImage(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      document.getElementById('imagePreview').src = e.target.result;
    };
    
    reader.readAsDataURL(input.files[0]); // 读取文件内容
  }
}

在这个例子中，当用户选择了一个文件后，onchange事件会触发previewImage函数。这个函数使用FileReader对象读取文件，然后将读取到的图片数据URL赋给img元素的src属性，从而实现了图片的预览。