html文件读取和image图片展示

在HTML中，可以使用<img>标签来展示图片，并且可以通过JavaScript来读取文件并显示图片。以下是一个简单的例子，展示了如何使用<input type="file">标签读取用户选择的图片，并在网页上显示。

HTML部分：

<input type="file" id="imageInput" />
<img id="imageDisplay" src="" alt="Image preview..." />

JavaScript部分：

document.getElementById('imageInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('imageDisplay').src = e.target.result;
    };
    reader.readAsDataURL(file);
});

这段代码的作用是：

1. 用户通过<input>选择文件。
2. JavaScript读取该文件，并使用FileReader对象转换为一个DataURL。
3. 当文件读取完毕，FileReader的onload事件会触发，然后将图片的DataURL设置为<img>标签的src属性，从而展示图片。