简单的html5 readAsDataURL img和base64互相转换

浏览数：167 / 时间：2015年06月09日

<!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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

简单的html5 readAsDataURL img和base64互相转换