獲取圖片base64的方法
阿新 • • 發佈：2018-04-26
pan ase .get tcs css 上傳文件 src 判斷 ref
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <input type="file" class="file" name="imgfile" id="imgfile"placeholder="請選擇文件"> <img src="" id="showImg" > <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> var input = document.getElementById("imgfile"); //檢測瀏覽器是否支持FileReader if (typeof (FileReader) === ‘undefined‘) { result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader，請使用現代瀏覽器操作！"; input.setAttribute(‘disabled‘, ‘disabled‘); } else { //開啟監聽 input.addEventListener(‘change‘, readFile, false); } function readFile() { var file = this.files[0]; //限定上傳文件的類型，判斷是否是圖片類型 if (!/image\/\w+/.test(file.type)) { alert("只能選擇圖片"); return false; }var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { base64Code=this.result; //把得到的base64賦值到img標簽顯示 $("#showImg").attr("src",base64Code); } } </script> </body> </html>
獲取圖片base64的方法