<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>選擇圖片生成base64數據</title> <script> function getUrl(file) { var $div = document.getElementById("text"); var img = document.getElementById("Image"); for (var intI = 0; intI < file.length; intI++) {//圖片回顯 var tmpFile = file[intI]; var reader = new FileReader(); reader.readAsDataURL(tmpFile); reader.onload = function (e) { var url = e.target.result; img.src = url; $div.innerHTML=url; } } } </script> <style> #text{ width: 500px; border: 1px solid red; height: 100px; overflow-y: scroll; word-wrap:break-word ; } </style> </head> <body> <input type="file" id="fileId" name="fileId" value="上傳圖片" onchange="getUrl(this.files);"/> <img src="" id="Image" width="100px" height="70px"> <div id="text"></div> </body> </html>