在 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 并注意浏览器兼容性。

查看此主题 -> Preview an image before it is uploaded

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

Live preview of the uploaded image in thymeleaf

html

image-uploading

live-preview

thymeleaf