在文件上传窗口中选择图像时显示缩略图

Question

我的页面包含此代码，用于从电脑中选择图像：

<input type="file" id="bc_imgItem" accept="image/*" onchange="imageUpload()">

执行此操作时，会打开一个窗口，在其中我可以看到列表中的图像。我需要查看图像的缩略图（预览）。这样我就可以看到我要上传的内容。我希望 html 中有一个属性可以做到这一点。

我正在使用 Windows 11。 我已经以正确的方式设置了资源管理器。当我打开目录时，我看到图像的缩略图，但当我打开将这些图像上传到网站的窗口时，它不起作用。

Answer 1

=>只需将图像路径放入 img 标签的 src 属性中即可。它将帮助您在屏幕上预览图像。

=>你将在js中编写逻辑来从map函数中获取图像的路径，这肯定会对你有所帮助。

=>react js 中的示例在这里，您也可以在不使用 React 的情况下使用它，只需询问 chatGPT。

<div className="row">
      {uploadedFiles.map((file) => (
          <div key={file.fileName} className="col-md-4 mb-4">
          <div className="card" style={{border: '0.2px solid black'}}>
            <img
              src={`/uploads/${file.fileName}`} // Assuming this is the path to the image file
              className="card-img-top"
              alt={file.fileName} // Assuming this is the name of the image file
              />
            <div className="card-body">
              <h5 className="card-title">{file.fileName}</h5>
            </div>
          </div>
        </div>
      ))}
    </div>