zoukankan      html  css  js  c++  java
  • base64和图片的互转(HTML5的File实现)

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>简单的html5 File测试 for pic2base64</title>
        <style>
        </style>
        <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 = this.files[0];
                //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
    //            if(!/image/w+/.test(file.type)){
    //                alert("请确保文件为图像类型");
    //                return false;
    //            }
    
    
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    //result.innerHTML = '<img src="'+this.result+'" alt=""/>';
                    result.innerHTML = this.result;
                    //img_area.innerHTML = '<div class="sitetip">图片img标签展示:</div><img src="'+this.result+'" alt=""/>';
                    img_area.innerHTML = '<img src="'+this.result+'" alt=""/>'
                }
            }
        </script>
    </head>
    
    
    <body>
    <input type="file" value="fenjin" id="demo_input" />
    <textarea id="result" rows=30 cols=300></textarea>
    <p id="img_area"></p>
    </body>
    </html>
  • 相关阅读:
    python模块--time模块
    python模块--如何相互调用自己写的模块
    Animating Views Using Scenes and Transitions
    fragment 切换
    android textview 设置text 字体
    android intent 5.1
    android EditView ime
    animation of android (4)
    animation of android (3)
    animation of android (2)
  • 原文地址:https://www.cnblogs.com/adjk/p/5112328.html
Copyright © 2011-2022 走看看