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

阿布舍克·伊坎特

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

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

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

罗伊

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

Thymeleaf文字文字中的下划线

来自分类Dev

在ThymeLeaf中循环遍历数组

来自分类Dev

Thymeleaf中的算术运算

来自分类Dev

在Thymeleaf模板中访问会话属性

来自分类Dev

Thymeleaf-在模板中配置邮件主题

来自分类Dev

Thymeleaf:URL中的参数不会被替换

来自分类Dev

春季启动Thymeleaf Multipart文件上传

来自分类Dev

Spring + Thymeleaf:用户时区中的时间

来自分类Dev

Thymeleaf中嵌套循环项的连续计数

来自分类Dev

在thymeleaf Spring框架中从本地目录插入图像(使用Maven)

来自分类Dev

无法在Thymeleaf中引用迭代变量

来自分类Dev

在Opencart的产品页面中预览上传的图像

来自分类Dev

Thymeleaf-绑定无法在片段中工作

来自分类Dev

Thymeleaf中的条件包装

来自分类Dev

对于Thymeleaf中的每个运算符

来自分类Dev

Thymeleaf中多个div的条件布局

来自分类Dev

Thymeleaf / Spring中的Concat琴弦

来自分类Dev

无法遍历Thymeleaf中的List

来自分类Dev

不会显示html图像中的Spring thymeleaf

来自分类Dev

Thymeleaf:属性文件中的placeHolders

来自分类Dev

Thymeleaf中的链接URL

来自分类Dev

灰烬-实时预览图像

来自分类Dev

上传后预览图像

来自分类Dev

在Thymeleaf中应用表格排序

来自分类Dev

访问类中的对象 - thymeleaf

来自分类Dev

thymeleaf @ModelAttribute 中的可变参数?

来自分类Dev

如果 thymeleaf 中的语句

来自分类Dev

无法使用 Spring Boot thymeleaf 加载图像

来自分类Dev

在 Thymeleaf 中翻译属性值