文件轉base64
1、將代碼另存爲html
2、瀏覽文件
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="yes" name="apple-touch-fullscreen" />
<meta content="telephone=no" name="format-detection" />
<meta name="viewport" content="width=device-width,user-scalable=no" />
</head>
<body>
<input type="file" /><br />
<label for="outputBase64">base64:</label><br />
<textarea id="outputBase64" rows="10" cols="40"></textarea><br />
<button id="btnShow">將base64顯示在圖片裏</button><br />
<img id="img" src="#" />
<script>
var ifile = document.querySelector("[type=\"file\"]");
var outputBase64 = document.querySelector("#outputBase64");
var btnCopy = document.querySelector("#copyToClipboard");
var btnShow = document.querySelector("#btnShow");
var img = document.querySelector("#img");
//監測選中了文件
ifile.addEventListener("change", function (e) {
var file = e.target.files[0];
var fr = new FileReader();//文件讀取器
//文件讀取完成
fr.addEventListener("load", function (ev) {
var base64 = ev.target.result;
outputBase64.value = base64;
img.src = base64;
});
if (file) fr.readAsDataURL(file);//讀取爲base64
ifile.value = "";
});
btnShow.addEventListener("click", function (e) {
img.src = outputBase64.value;
});
</script>
</body>
</html>運行結果
