JS

首页 -  JS  -  js上传图片转64位编码

js上传图片转64位编码

下面为大家介绍一种js图片上传转base64编码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片上传转base64显示</title>
    <script src="http://www.xiaoshu168.com/js/public/jquery.min.js"></script>
</head>
<body>
<input value="sdgsdg" id="demo_input" type="file">
<textarea id="result" rows="30" cols="300"></textarea>
<p id="img_area"></p>
<script>
    window.onload = function() {
        var input = document.getElementById("demo_input");
        var result = document.getElementById("result");
        var img_area = document.getElementById("img_area");
        if (typeof(FileReader) === 'undefined')
        {
            result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!";
            input.setAttribute('disabled','disabled');
        } else
        {
            input.addEventListener('change', readFile, false);
        }
    }
    function readFile()
    {
        var file = document.getElementById("demo_input").files[0];
        // console.log(fiol);
        //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
        if (!/image\/\w+/.test(file.type))
        {
            alert("请确保文件为图像类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        console.log(this.result);
        reader.onload = function(e) {
            result.innerHTML = '<img src="' + this.result + '" alt=""/>';
            img_area.innerHTML = '<div class="sitetip">图片img标签展示</div><img src="' + this.result + '" alt=""/>';
        }
    }
</script>
</body>
</html>
(6)
分享:

本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!

标签:

相关阅读