在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