<!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. 创建元素节点createElement

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Dubbo 新编程模型之外部化配置

    外部化配置(External Configuration) 在Dubbo 注解驱动例子中,无论是服务提供方,还是服务消费方,均需要转配相关配置Bean: @Bean public Applicatio ...

  3. [Luogu4149][IOI2011]Race

    BZOJ权限题qwq Luogu sol 树上路径当然是淀粉质辣! 考虑所有过重心的路径.开一个\(10^6\)大小的数组\(t\)表示某一路径长度的最小边数,初始化为\(inf(i>0)\), ...

  4. onmouse事件

    常用的鼠标事件:onmouseenter,onmouseleave,onmouseover,onmouseout,onmouseup,onmousedown,onmousewheel,onmousem ...

  5. JBox使用详解

    插件说明 - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Safari.O ...

  6. 使用NPOI导出Excel引发异常（IsReadOnly = “book.IsReadOnly”引发了类型“System.NotImplementedException”的异常）

    前言: 本人调式npoi导入.导出试用成功后,引入到项目中,导入完美运行,但是导出怎么样都看不到现在的页面,而且浏览器和后台都没有报任务错误,让人好事纳闷,后来去调式,发现在除了一个IsReadOnl ...

  7. Unity 网格合并

    从优化角度,Mesh需要合并. 从换装的角度(这里指的是换形状.换组成部件的换装,而不是挂点型的换装),都需要网格合并.材质合并.如果是人物的换装,那么需要合并SkinnedMeshRenderer, ...

  8. KeePass使用心得

    这几天发现有人说lastpass并不安全,于是发现了KeePass这个软件,其实这个软件很早之前就知道,不过没有使用,下面就说说我找到的关于这个工具的所有总结. KeePass 配合 Firefox ...

  9. curl post请求总是返回417错误

    在进行post请求的时候, curl总是返回417错误 在使用curl做POST的时候, 当要POST的数据大于1024字节的时候, curl并不会直接就发起POST请求, 而是会分为俩步. 发送一个 ...

  10. VirboxLM许可管理平台，一站式软件保护解决方案

    安全,易用,灵活 轻松解决开发者软件版权保护难题 Virbox LM为企业提供安全易用的软件保护管理平台,实现高安全强度的软件防护,防止盗版及逆向工程.实现便捷.安全的软件授权,包括创建灵活的许可模式 ...