<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<input accept="image/*" name="upimage" id="upload_file" type="file">

		<textarea id="base64_output" name="Word" style=" width:820px"></textarea>

		<script type="text/javascript">

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

				gen_base64();

			};

			function $_(id) {

					return document.getElementById(id);

			}

			function gen_base64() {

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

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

				r.onload = function(){

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

				}

				r.readAsDataURL(file);    //Base64

			}

		</script>

	</body>

</html>

JS上传图片转化成Base64编码demo的更多相关文章

  1. js将图片转为base64编码，以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  2. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. [转]JS将图片转为base64编码

    本文转自:https://blog.csdn.net/DeMonliuhui/article/details/79731359 1.根据img标签获取base64编码/** * * @param im ...

  4. 图片转化成base64编码

    var img = "imgurl";//imgurl 就是你的图片路径 function getBase64Image(img) { var canvas = document. ...

  5. php和js中，utf-8编码转成base64编码

    1.php下转化base64编码 php中,文本文件的编码决定了程序变量的编码,比如以下代码在不同编码的php文件中,展示的效果也是不一样的 <?php $word = '严'; echo ba ...

  6. Base64编码解码(js)

    开源的base64.js,使用很简单,浏览器引入该JS文件,然后Base64编码这样: Base64.encode('china is so nb'); // 编码 "Y2hpbmEgaXM ...

  7. base64编码理解

    原文地址:http://www.ruanyifeng.com/blog/2008/06/base64.html 所谓Base64,就是说选出64个字符----小写字母a-z.大写字母A-Z.数字0-9 ...

  8. BASE64编码乱码问题的浅层分析与解释

    本文由作者朱臻授权网易云社区发布. 1问题案例 曾在开发过程中,我们遇到了BASE64编码乱码的问题,该问题的场景如下: 当web前端,将带有中文字符的字符串base64编码后,传到后端.当后端将数据 ...

  9. 用javascript实现base64编码器以及图片的base64编码

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

随机推荐

  1. jpetStore 学习总结(2)

    在写jpetstore时,最难理解的应该是数据库还有每个表之间的关系了,我在这里对数据库简单的介绍. 以下是数据库的所有表:    account表是个人信息表,里面包括用户的名字,邮箱,地址,哪个城 ...

  2. vim中常用的命令

    1.光标的命令 gg 移到第一行位置 G 移到最后一行 o       行首 $       行末 nk 向上移动n行 nj 向下移动n行 nh 向左移动n列 nl 向右移动n列 ctrl+f     ...

  3. CSS04--对齐、 布局、导航栏

    我们接着上一章,继续学习一些有关对齐.布局.导航栏的内容. 1.水平块对齐:    1.1 margin:把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素    .c ...

  4. php正则验证邮箱、手机号、姓名、身份证、特殊符号等

    1.邮箱验证 1 $email='1515212@qq'; 2 $preg_email='/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@([a-zA-Z0-9]+[-.])+( ...

  5. 论文分享NO.3（by_xiaojian）

    论文分享第三期-2019.03.29 Fully convolutional networks for semantic segmentation,CVPR 2015,FCN 一.全连接层与全局平均池 ...

  6. Android各版本及API对应关系，持续更新！

    以下是Android的各个版本与API的对应关系图标,便于查阅,会持续更新 API等级 Android版本号 Android版本名称 对应支持包 API等级1: Android 1.0     API ...

  7. (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议 (图)

    (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议! 新闻采集器做好了,前端展示APP界面感觉还不是很好,还需要改进改进,希望发布(Android和IOS版本)前听听大家的建 ...

  8. mysql中的CURRENT_TIMESTAMP

    MySQL的timestamp类型可以使用CURRENT_TIMESTAMP来指定默认值,当记录增.改时,该值会自动取当前时间,如下图所示: 增加或修改记录时,该值自动变化 但是这个跟MySQL的版本 ...

  9. C#中判断系统的架构(32位，还是64位)

    一种很简单的方法就是根据IntPtr类型的Size属性来判断, //IntPtr.Size在64位为8,在32位为4 public static Boolean Is64Bit() { ) retur ...

  10. 介绍Windows Azure HDInsight服务的Hadoop Storm的视频

    介绍Windows Azure HDInsight服务的Hadoop Storm的原理,用例及开发入门的视频,收藏一下: http://channel9.msdn.com/Shows/Data-Exp ...