<!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. python 全栈开发：数据类型整体分析

    数据类型初始 数据类型:    int :用于计算. 例子:1.2.3.4........................... 常用方法操作: bit_length()   ps:求一个数字转换成二 ...

  2. [性能测试]：记录一次性能测试，nmon文件收集工具的小问题

    问题:今天发现nmon文件分析成excel后,用<NMON抽取结果.excel>无法抓取到数据 解决过程:1,认为是nmon分析文件<nmon analyser v33g.xls&g ...

  3. 1.CentOS6.5下的基础DNS配置

    常规DNS的安全和配置1.安装DNSyum -y install bind bind-utils安装后生成的文件,我们主要配置下面几个/etc/named.conf/var/named/xx这个xx是 ...

  4. MongoDB学习笔记(二)

    MongoDB的其他方法: 显示指定数目的数据: 1.在mongodb中查询指定数目的记录,可以使用: db.collectionname.find().limit(number); 2.在mongo ...

  5. Mac下常用快捷键（转）

    前提,先熟读键盘快捷键符号:http://www.cnblogs.com/EasonJim/p/6350075.html 基本操作: Command-Z 撤销 Command-X 剪切 Command ...

  6. 同一个Activity先后加载2个Layout,从layout1取值传入layout2

    同一个Activity先后加载2个Layout,从layout1取值传入layout2 没啥技术含量,就权当丰富下mono for android的小代码. Main.xaml <?xml ve ...

  7. mono上部署web程序初体验

    早就想体验一下mono,但一直琐事缠身.难得有时间,便在网上一通狂搜mono相关的资料. 如果想使用Apache服务器,只能使用mod_mono的方式,这里有详细的介绍.这种方式有点繁琐,需要安装一大 ...

  8. Jira 6.0.5的详细安装及汉化授权

    第一步:安装jdk-6u24-windows-i586.exe (1)下载到oracle官网下装安装 jdk-6u24-windows-i586.exe,http://www.oracle.com/t ...

  9. 《LeetBook》LeetCode题解(2):Add Two Numbers [M]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  10. orcale 之pl/sql例外

    orcale 中的例外我们可以看作是其他编程语言中的异常,是为了增强语言的健壮性和容错性. 在orcale中常见的有以下几种: No_data_found 很容易理解就是没有数据返回. Too_man ...