<!DOCTYPE html>
<html xmlns="><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>