网站SEO优化教程|技术分享|源码分享

本博客文章均是作者原创,记录码砖的点点滴滴,不介意搬砖,希望大家转载注明出处,感谢ing……




JS图片IMG转BASE64源码


 2020-05-19 20:27:48  浏览量:(8)   标签: JS图片IMG转BASE64  IMG转BASE64  IMG转BASE64源码 




预览图:

0C519201757 (1).png

JS图片IMG转BASE64源码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片转base64</title><style>body{ margin:0; text-align:center}textarea{ margin:0; width:60%; height:200px;}

</style></head><body>

<style>

.content-a-upload {

    height: 30px;

    width: 200px;



    text-align: center;

    cursor: pointer;

    color: #888;

    background: #ffbad9;

    border: 1px solid #ddd;

    border-radius: 7px;

    overflow: hidden;

    display: inline-block;

    text-decoration: none;

}

.content-a-upload input {

    opacity: 0;

    cursor: pointer;

}

.content-a-upload:hover {

    color: #444;

    background: #ff6a8e;

    border-color: #ccc;

    text-decoration: none

}

</style>

<div align="center" style="margin-top:20px"><a href="" class="content-a-upload">

<input accept="image/*" name="upimage" id="upload_file" type="file" value="选择图片"></a></div>

<p style='color: #C00;margin-top:30px;'><textarea id="base64_output"  placeholder="生成后的base64编码"></textarea></p>

<input id="zh" type='button' style=' width:200px; height:60px; color: #FFF; background-color:#C30; font-size:20px' value='预览图片' onclick="test_base64()" />

<div id="img_size"> </div><div class="span" id="update_file_label"></div>

<img id="img_prev" src="" style="max-width:60%;border: 1px solid red;margin-bottom:20px;" data-bd-imgshare-binded="1">



					<script type="text/javascript">

						document.getElementById("upload_file").onchange = function () {

						    document.getElementById("update_file_label").innerHTML = this.value;

						    gen_base64();

						};

					</script>

            <script type="text/javascript">

				function $_(id) {

					return document.getElementById(id);

				}

				function gen_base64() {

					$_('base64_output').value = '';

					$_('img_size').innerHTML = '';

					$_('img_prev').src = '';

					var file = $_('upload_file').files[0];

					if(!/image\/\w+/.test(file.type)){

						alert("请确保文件为图像类型");

						return false;

					}

					r = new FileReader();  //本地预览

					r.onload = function(){

						$_('base64_output').value = r.result;

						$_('img_size').innerHTML = "    图片大小:" + Math.round(r.result.length/1024*1000)/1000 + " KB";

					}

					r.readAsDataURL(file);    //Base64

				}

				function test_base64() {

					$_('img_prev').src = '';

					$_('img_prev').src = $_('base64_output').value;

				}

				window.onload = function() {

					if ( typeof(FileReader) === 'undefined' ){

						alert("抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!");

						$_('upload_file').disabled = true;

					}

				}



            </script>



</body>

</html>


如文章内容失效请联系作者更新,感谢ing,如有任何疑问点击网站提问按钮;

本文由【日韩赶SEO】原创,转载请注明出处,违者必究:http://4asport.com/post/80.html

提问 刷新 ^

友情链接:A5源码

Copyright ?2019 【日韩赶SEO】陕ICP备14011930号