如何使用JS将file输入框中用户上传的图片显示在div中

直接上可运行的代码示例，分HTML和JS两部分：

<!-- HTML结构 -->
<input type="file" id="imageInput" accept="image/*">
<img id="previewImage" style="max-width: 400px; max-height: 400px; margin-top: 10px;">

// JavaScript逻辑
const imageInput = document.getElementById('imageInput');
const previewImage = document.getElementById('previewImage');

imageInput.addEventListener('change', function(e) {
  // 获取用户选中的第一个文件
  const file = e.target.files[0];
  
  // 校验是否为有效图片
  if (!file || !file.type.startsWith('image/')) {
    previewImage.src = '';
    alert('请选择有效的图片文件');
    return;
  }
  
  // 用FileReader读取文件并生成预览URL
  const reader = new FileReader();
  reader.onload = function(event) {
    previewImage.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

关键逻辑说明 #

• HTML部分：

  • accept="image/*" 用来限制用户只能选择图片类文件，减少无效操作
  • 预留的img标签作为预览容器，通过内联样式限制最大尺寸，避免布局混乱

• JS部分：

  • 监听change事件：用户选完文件后自动触发
  • 文件校验：通过file.type判断文件类型，确保只有图片能进入预览流程
  • FileReader的作用：把本地图片文件转换成base64格式的DataURL，这个URL可以直接赋值给img.src实现本地预览

额外扩展（多选图片预览） #

如果需要支持多选图片，给input加上multiple属性，再遍历选中的文件动态创建预览元素：

// 多选图片预览逻辑
imageInput.addEventListener('change', function(e) {
  const files = e.target.files;
  const previewContainer = document.getElementById('previewContainer');
  previewContainer.innerHTML = ''; // 清空旧预览内容
  
  Array.from(files).forEach(file => {
    if (!file.type.startsWith('image/')) return;
    
    const reader = new FileReader();
    reader.onload = function(event) {
      const img = document.createElement('img');
      img.src = event.target.result;
      img.style.maxWidth = '200px';
      img.style.margin = '5px';
      previewContainer.appendChild(img);
    };
    reader.readAsDataURL(file);
  });
});

对应的HTML结构调整为：

<input type="file" id="imageInput" accept="image/*" multiple>
<div id="previewContainer" style="margin-top: 10px;"></div>

内容的提问来源于stack exchange，提问作者user17326573