input输入图片在指定区域形成预览

在网页开发中，为了实现在用户选择图片后立即显示预览效果，你可以利用HTML的`<input type="file">`结合JavaScript来实现。首先，在HTML里创建一个用于选择图片的`<input>`标签，并设置其`type`属性为`file`：

<input type="file" id="previewInput" accept="image/*" />
<div id="previewArea"></div>

这里的`accept`属性用于限制用户只能选择图片。然后，创建一个空的`<div>`作为预览区域。

接下来，使用JavaScript获取用户的图片选择事件，当用户选择图片后，读取图片内容并在预览区显示：

document.getElementById('previewInput').addEventListener('change', function(e) {
    var files = e.target.files; // 获取选中的文件
    if (files.length > 0) {
        var file = files[0];
        var reader = new FileReader();
        
        reader.onload = function(e) {
            // 图片加载完成，将URL转换为Image对象显示
            var imgPreview = document.createElement('img');
            imgPreview.src = e.target.result;
            imgPreview.style.maxWidth = '100%'; // 预设图片最大宽度
            document.getElementById('previewArea').appendChild(imgPreview);
        };
        
        reader.readAsDataURL(file); // 读取图片数据
    }
});

这段代码会在用户选择了图片之后，创建一个新的`<img>`标签，将其src设置为文件读取器返回的数据URI，然后将图片插入到预览区域。

注意，这种方法是同步的，如果图片较大，可能会阻塞页面渲染。如果你希望提供更流畅的体验，可以选择异步处理图片读取，或者使用第三方库如Plupload、Fine Uploader等来进行文件管理。