博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
简单的html5 readAsDataURL img和base64互相转换
阅读量:4335 次
发布时间:2019-06-07

本文共 1216 字,大约阅读时间需要 4 分钟。

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

转载于:https://www.cnblogs.com/zodiacblog/p/3998183.html

你可能感兴趣的文章
ThreadLocal为什么要用WeakReference
查看>>
删除本地文件
查看>>
FOC实现概述
查看>>
base64编码的图片字节流存入html页面中的显示
查看>>
这个大学时代的博客不在维护了,请移步到我的新博客
查看>>
GUI学习之二十一——QSlider、QScroll、QDial学习总结
查看>>
gethostbyname与sockaddr_in的完美组合
查看>>
kibana的query string syntax 笔记
查看>>
旋转变换(一)旋转矩阵
查看>>
thinkphp3.2.3 bug集锦
查看>>
[BZOJ 4010] 菜肴制作
查看>>
C# 创建 读取 更新 XML文件
查看>>
KD树
查看>>
VsVim - Shortcut Key (快捷键)
查看>>
HDU5447 Good Numbers
查看>>
08.CXF发布WebService(Java项目)
查看>>
java-集合框架
查看>>
RTMP
查看>>
求一个数的整数次方
查看>>
点云PCL中小细节
查看>>