<!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>
转载于:https://www.cnblogs.com/zodiacblog/p/3998183.html
