HTML点击上传本地图片到页面 并在页面上显示上传的图片

在HTML中，你可以通过结合`<input type="file">`、`<img>`标签以及JavaScript来实现在页面上点击上传图片并在同一页面显示。下面是一个简单的示例：

1. 创建一个文件选择输入框：

<input type="file" id="imageInput" accept="image/*" multiple>

`multiple`属性允许多次选择图片。

2. 添加事件监听，当用户选择图片时，读取文件并显示预览：

document.getElementById('imageInput').addEventListener('change', function (e) {
    var files = e.target.files;
    if(files.length > 0){
        for(var i=0; i<files.length; i++){
            var reader = new FileReader();
            reader.onload = function(e){
                var image = new Image();
                image.src = e.target.result;
                image.onload = function() {
                    // 可能需要调整图片尺寸，适应页面布局
                    var container = document.getElementById('imagePreview');
                    container.innerHTML = '<div class="preview"><img src="' + this.src + '" alt="Uploaded Image"></div>';
                };
                image.onerror = function() {
                    console.error('Error reading file:', this.src);
                };
                reader.readAsDataURL(files[i]);
            };
            reader.readAsDataURL(files[i]); // 开始读取图片
        }
    }
});

3. 预先在HTML中创建一个容器用于显示图片预览：

<div id="imagePreview"></div>

这样，用户选择图片后，会立即在页面上看到预览效果。请注意，实际项目中可能还需要考虑错误处理和性能优化。