將圖片base64
阿新 • • 發佈:2018-12-07
將圖片base64
html部分:
寫入兩個標籤:input:用於上傳圖片,div用來做為顯示圖片的容器
js部分:
1)利用input的onchange事件,拿到檔案物件
let iput = document.querySelector('input')
let file = null
input.onchange = function(e) {
file = e.target.files[0] || e.dataTransfer.files[0]
preview(file)
}
2)利用FileReader函式獲取一個例項reader,實現圖片的base64
function preview(file) { // 建立一個reader例項 let reader = new FileReader() // 將檔案base64 reader.readAsDataURL(file) // 上傳成功後的回撥 reader.onloadend = function() { let imgBox = document.getElementById('img-box') let result = this.result let img = document.createElement('img') img.src = result imgBox.appendChild(img) } }
實際結果如下: