html將圖片讀取為base64格式預覽並傳到伺服器
阿新 • • 發佈:2019-01-10
執行截圖:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #preview{ width: 400px; height: 360px; border: solid 1px rgba(0,0,0,.1); border-radius: 5px; } </style> </head> <body> <input type="file" name="" onchange="handleSelected()"> <img id="preview" src="" width="100%" height="100%"/> <script type="text/javascript"> function handleSelected(){ /**得到FileList的第一個元素,也就是上傳的圖片**/ var e = window.event || arguments[0]; let file = e.target.files[0]; console.log(file) /**建立一個FileReader例項,用來讀取檔案**/ let reader = new FileReader(); /**成功讀取之後將圖片顯示出來**/ reader.onload = function(e){ let image = document.getElementById('preview'); image.src = e.target.result; image.onload = function (){ console.log(e.target.result) console.log('圖片加載出來了...') } } reader.readAsDataURL(file); } </script> </body> </html>