即时图像和文本映像到Base64转换器 选图结果出编码可复制无图像

chenyajun  2022-10-16 13:37:10  阅读 964 次 评论 0 条
<html>    <head>    <title>即时映像到Base64转换器</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    </head>    <body style="text-align:center;margin: 0 auto; width:80%">    <h2>Instant Image To Base64</h2>    
	<div class="modal-body">    
	<input style="padding: 11px;width: 100%;cursor: pointer;background: white;color: black;" id="image" onchange="result(this);" class="well" type="file">    
	<input onclick="select()" class="form-control" style="margin-top: 10px; height: 50px;" id="tobase64" placeholder="Code Will Appear Here" alt="base64link">    
	<a style="display:none" id="linkopen" target="_blank" href="#">View!</a>    </div>    </body>    </html>    <script>    function result(input) {    
            if (input.files && input.files[0]) {    
                var reader = new FileReader();    
                reader.onload = function (e) {    
                    $('#tobase64')    
                        .attr('value', e.target.result);    
					$("#linkopen").attr({    
                    "href" : e.target.result,    
                    "style" : "display:block;margin-top: 20px;"    
                        });    
                };    
                reader.readAsDataURL(input.files[0]);    
            }    
        }    </script>


本文地址:https://chenyajun.net/index.php/post/96.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!