码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-28 16:32:53      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:http   io   使用   ar   sp   on   c   cti   html   

<!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互相转换

标签:http   io   使用   ar   sp   on   c   cti   html   

原文地址:http://www.cnblogs.com/zodiacblog/p/3998183.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!