<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>选择图片生成base64数据</title>

    <script>

        function getUrl(file) {

            var $div = document.getElementById("text");

            var img = document.getElementById("Image");

            for (var intI = 0; intI < file.length; intI++) {//图片回显

                var tmpFile = file[intI];

                var reader = new FileReader();

                reader.readAsDataURL(tmpFile);

                reader.onload = function (e) {

                    var url = e.target.result;

                    img.src = url;

                    $div.innerHTML=url;

                }

            }

        }

    </script>

    <style>

        #text{

            width: 500px;

            border: 1px solid red;

            height: 100px;

            overflow-y: scroll;

            word-wrap:break-word ;

        }

    </style>

</head>

<body>

<input type="file" id="fileId" name="fileId" value="上传图片" onchange="getUrl(this.files);"/>

<img src="" id="Image" width="100px" height="70px">

<div id="text"></div>

</body>

</html>

js 选择图片生成base64数据的更多相关文章

  1. 图片转换base64数据上传，并且实现预览的简便方法

    对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间 ...

  2. 移动端实现裁剪图片生成base64图片(可缩放)

    移动端实现裁剪图片生成base64图片(可缩放)<pre><!DOCTYPE html><html lang="en"> <head> ...

  3. JavaScript 图片与Base64数据互相转换脚本

    JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...

  4. 前端JS转图片为base64并压缩、调整尺寸脚本

    image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...

  5. js,JQ 图片转换base64 base64转换为file对象,blob对象

    //将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...

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

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

  7. 使用JS将图片转为Base64

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  9. JS 获取图片的base64编码

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

随机推荐

  1. 【CJOJ P1957】【NOIP2010冲刺十模拟赛】数字积木

    [NOIP2010冲刺十模拟赛]数字积木 Description 小明有一款新式积木,每个积木上都有一个数,一天小明突发奇想,要是把所有的积木排成一排,所形成的数目最大是多少呢? 你的任务就是读入n个 ...

  2. 【CJOJ1167】【洛谷1894】[USACO4.2]完美的牛栏

    题面 Description 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星期,农夫约翰随便地让奶牛们进入牛栏,但是问题很快地显露出来 ...

  3. Bzoj3992：[SDOI2015]序列统计

    题面 Bzoj Sol pts 1 大暴力很简单,\(f[i][j]\)表示到第\(i\)个位置,前面积的模为\(j\)的方案 然后可以获得\(10\)分的好成绩 # include <bits ...

  4. iOS开发--XMPPFramework--环境的配置（一）

    一.XMPPFramework概述 XMPPFramework是一个OS X/iOS平台的开源项目,使用Objective-C实现了XMPP协议(RFC-3920),同时还提供了用于读写XML的工具, ...

  5. linux优化项

    Linux优化: 1.建立普通账号,使用普通用户登陆. 2.处理SELINUX. 3.处理防火墙. 4.精简开机自启动服务.保留sshd,network,crond,rsyslog,sysstat. ...

  6. jsoup.parse 的一个坑

    那天,写好一个爬虫 爬取某个网站的数据. 当时调用了公司不知道某个人写的 一个方法 logger.info(joururl); doc= util.getDocument(joururl.toStri ...

  7. 【Learning】带花树——一般图最大匹配

    一般图最大匹配--带花树 问题 ​ 给定一个图,求该图的最大匹配.即找到最多的边,使得每个点至多属于一条边. ​ 这个问题的退化版本就是二分图最大匹配. ​ 由于二分图中不存在奇环,偶环对最大匹配并无 ...

  8. jdk,maven,tomcat 的环境配置

    一般的下载,我想就不用我多说什么了,mysql的配置在mysql压缩包安装方式上,这里直接贴图,下次要是忘记了可以看一眼. 这两个是直接新建的,打开方式为我的电脑,右键:属性,左侧:高级系统设置,下侧 ...

  9. MyBatis的三层级联和二层缓存

           我们这里说的三层级联和二级缓存其实也是MyBatis映射器的知识点,只是因为比较难理解,所以单独拿出来讲解,下面是三层级联的内容:        我们知道,在数据库中包含着一对一,一对多 ...

  10. 洛谷 P1025 数的划分

    题目描述 将整数n分成k份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5; 1,5,1; 5,1,1; 问有多少种不同的分法. 输 ...