<!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. 洛谷P3434 [POI2006]KRA-The Disks（线段树）

    洛谷题目传送门 \(O(n)\)的正解算法对我这个小蒟蒻真的还有点思维难度.洛谷题解里都讲得很好. 考试的时候一看到300000就直接去想各种带log的做法了,反正不怕T...... 我永远只会有最直 ...

  2. Poj3678：Katu Puzzle

    大概题意 有\(n\)个数,可以为\(0/1\),给\(m\)个条件,表示某两个数经过\(or, and, xor\)后的数是多少 判断是否有解 Sol \(2-SAT\)判定 建图 # includ ...

  3. [HNOI2007]紧急疏散

    二分+网络流判定 首先处理出每个人和门间的距离 二分时间,连边时把每个门拆成mid个,一个人能在mid时间内到达,他也可以在这等一会儿,那么这mid个门之间连边 如果可以在x的时间内到达,那么x~mi ...

  4. 云计算之路-阿里云上：博客web服务器轮番CPU 100%

    今天下午14:30左右开始,不知道怎么回事,博客站点负载均衡中的web服务器轮番CPU 100%.平时访问高峰5台服务器就能稳稳支撑,而今天发现CPU出现100%问题后就开始加服务器,结果到目前加到了 ...

  5. CLOB型转成字符型

    //oracle.sql.Clob类型转换成String类型 public static String ClobToString(Clob clob) { String reString = &quo ...

  6. java 关键字final static native详解

    java 关键字native static final详解 一.final 根据程序上下文环境,Java关键字final有"这是无法改变的"或者"终态的"含义, ...

  7. Mac下安装FFmpeg教程

    一.安装ffmpeg 分为两种安装方式: 1. 命令行安装 brew install ffmpeg 2. 下载压缩包安装 去 http://evermeet.cx/ffmpeg/ 下载7z压缩包,解压 ...

  8. Hadoop3.0完全分布式集群安装部署

    1. 配置为1个namenode(master主机),2个datanode(slave1主机+slave2主机)的hadoop集群模式, 在VMWare中构建3台运行Ubuntu的机器作为服务器: 关 ...

  9. angularjs 缓存详解

    一.什么是缓存 一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求. 缓存能够服务的请求越多,整体系统性能就提升得越多. 二.Angular 中的缓存 2.1 $cacheFac ...

  10. 【python学习笔记】7.更加抽象

    [python学习笔记]7.更加抽象 类的定义就是执行代码块 在内存保存一个原始实例,可以通过类名来访问 类的实例化,是创建一个原始实例的副本, 并且所有成员变量与原始实例绑定 通过修改实例变量,可以 ...