<!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. leetcode-374-Guess Number Higher or Lower（二分查找）

    题目描述: We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have t ...

  2. c#-MVC基础操作-数据的展示及增删改、登录页面及状态保持

    一.数据展示 1.View代码: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynam ...

  3. QuantLib 金融计算——基本组件之 InterestRate 类

    目录 QuantLib 金融计算--基本组件之 InterestRate 类 InterestRate 对象的构造 一些常用的成员函数 如果未做特别说明,文中的程序都是 Python3 代码. Qua ...

  4. Mac下截图工具

    苹果系统自带截图功能 1.截取全屏:快捷键(Shift+Command+3) ▲直接按“Shift+Command+3“快捷键组合,即可截取电脑全屏,图片自动保存在桌面. 2.截图窗口:快捷键(Shi ...

  5. Visual Studio 跨平台開發實戰(4) - Xamarin Android 基本控制項介紹 （转帖）

    前言 不同於iOS, Xamarin 在Visual Studio中針對Android, 可以直接設計使用者介面. 在本篇教學文章中, 筆者會針對Android的專案目錄結構以及基本控制項進行介紹, ...

  6. redux设计到源码 --- 美团点评技术团队（转）

    https://tech.meituan.com/redux-design-code.html

  7. 手机端全局样式表整理（mobile）

    @charset "utf-8";/*  * filename:          global.css * description:       全局样式(包含样式重置,公共常用 ...

  8. java处理数据库的CRUD

    package com.lhy.jdbc.util; import java.sql.Connection; import java.sql.PreparedStatement; import jav ...

  9. Jquery动画操作的stop()函数

    今天做一个点击动画时,遇到了当快速连续点击时,动画效果会乱,并不是我们想要达到的效果. 查询了一下,确认是动画累积的原因.网上搜了一下,发现jquery 的stop()函数刚好能解决. stop(cl ...

  10. 浅谈js中的垃圾两种回收机制

    一.标记清除 标记清除的主要思想是先建立各个对象的关联,然后从根节点出发,使用广度优先搜索依次标记所有对象,那些不能被标记的对象就应该作为垃圾回收. 这种方式的主要缺点就是如果某些对象被清理后,内存是 ...