html - 在 thymeleaf 中实时预览上传的图像

Question

在这里，我被困在上传图片一上传就显示预览。我所做的就是获取图片上传按钮：

<div class="form-group">
  <label for="recipientName">Image Upload</label>
  <input type="file" name="file"/>
</div>

在此之后，我不熟悉如何进行。

Answer 1

var reader = new FileReader();
reader.onload = function(r_event) {
  document.getElementById('prev').setAttribute('src', r_event.target.result);
}

document.getElementsByName('file')[0].addEventListener('change', function(event) {
    reader.readAsDataURL(this.files[0]);
});

<input type="file" name="file" />
<img src="" id="prev" />

• addEventListener 检测文件输入何时发生更改
• 使用 FileReader 对象的 readAsDataURL 函数读取文件数据

请阅读FileReader并注意浏览器兼容性。

查看此主题 ->在上传之前预览图像