<!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. tp3.2 URL_MODEL为2 配置

    1. tp项目index.php同级目录  add . htaccess文件 ,rewirte重写 内容为: <IfModule mod_rewrite.c> Options +Follo ...

  2. 【BZOJ4827】【HNOI2017】礼物（FFT）

    [BZOJ4827][HNOI2017]礼物(FFT) 题面 Description 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每 ...

  3. react实战第一步--搭建项目

    使用 create-react-app 快速构建 React 开发环境 1.cnpm install -g create-react-app 2.create-react-app react2(rea ...

  4. 解析Visual C# 7.2中的private protected访问修饰符

    去年12月份,随着Visual Studio 2017 Update 15.5的发布,Visual C#迎来了它的最新版本:7.2. 在这个版本中,有个让人难以理解的新特性,就是private pro ...

  5. 问题排查：The requested URL /test/index.jsp was not found on this server

    问题描述 添加一个新模块,部署在服务器上.服务器上还部署有其他模块且访问正常,新模块和其他模块共用同一个域名.服务部署之后,请求如下: http://my.domain.com/test/index. ...

  6. 【django之博客系统开发】

    一.项目简介 使用django开发一套博客系统,参考博客园. 需求如下: 项目结构: 二.全部代码 from django.db import models # Create your models ...

  7. 背景新增属性和css渐变及倒影

    背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...

  8. Java枚举类使用

    用法一:常量 在JDK1.5 之前,我们定义常量都是: public static fianl.... .现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了比常量更多的方法. p ...

  9. 笔记：MyBatis XML配置-typeHandlers 默认类型处理器

    类型处理器 Java 类型 JDBC 类型 BooleanTypeHandler java.lang.Boolean, boolean 数据库兼容的 BOOLEAN ByteTypeHandler j ...

  10. spring - boot 监控管理模块搭建

    Spring-Actuator是Spring-boot对应用监控的集成模块,提供了我们对服务器进行监控的支持,使我们更直观的获取应用程序中加载的应用配置.环境变量.自动化配置报告等. 使用Spring ...