<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>簡單的html5 readAsDataURL img和base64互相轉換</title>
</head>
<body>
<input type="file" value="" id="file_input"/><br/>
<textarea id="result" rows="10" cols="100"></textarea><br/>
輸入base64碼<input id="inputBase" type="text">
<button id="showImg">顯示圖片</button><br/>
<img>
<script>
window.onload = function () {
var file_input = document.getElementById( "file_input" ),
result = document.getElementById( "result" ),
inputBase=document.getElementById( "inputBase" ),
showImg=document.getElementById( "showImg" );
function readFile() {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL( file );
reader.onload = function ( e ) {
result.innerHTML= this.result;
}
}
if ( typeof(FileReader) === 'undefined' ) {
result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader，請使用現代瀏覽器操作！";
file_input.setAttribute( 'disabled', 'disabled' );
}
else {
file_input.addEventListener( 'change', readFile, false );
}
showImg.addEventListener( 'click', function(){
debugger;
document.querySelector("img" ).src=inputBase.value;
}, false );
};
</script>
</body>
</html>