示例程式碼：

<!-- multiple 代表選擇檔案可以多選 -->
<input type="file" name="cover" id="file" multiple>
<div class="thumbnail-waper">
    <img class="img-thumbnail" src="" id="fileImg">
</div>

<script type="text/javascript">
　　// 獲取選擇檔案的控制元件
　　var file = document.querySelector('#file')
　　// 獲取顯示圖片的控制元件
　　var fileImg = doucument.querySelector('#fileImg')
　　// 選擇檔案
　　file.onchange = funciton(){
　　　　// 建立讀取檔案內建物件
　　　　const reader = new FileReader()
　　　　// 讀取檔案（這是一個非同步方法，所以得需要onload中result.reader獲取），this.files代表上傳檔案列表資料
　　　　reader.readAsDataURL(this.files[0])
　　　　reader.onload = funciton(){
　　　　　　// 檔案賦值給顯示圖片控制元件
　　　　　　fileImg.src = result.reader
　　　　}
　　}
</script>