在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