js 选择图片生成base64数据
<!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数据的更多相关文章
- 图片转换base64数据上传,并且实现预览的简便方法
对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间 ...
- 移动端实现裁剪图片生成base64图片(可缩放)
移动端实现裁剪图片生成base64图片(可缩放)<pre><!DOCTYPE html><html lang="en"> <head> ...
- JavaScript 图片与Base64数据互相转换脚本
JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...
- 前端JS转图片为base64并压缩、调整尺寸脚本
image to base64 to blob //////////////////////////////////////////////////////////////////////////// ...
- js,JQ 图片转换base64 base64转换为file对象,blob对象
//将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...
- js将图片转为base64编码,以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...
- 使用JS将图片转为Base64
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
- JS 获取图片的base64编码
获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- POJ 2187 Beauty Contest(凸包,旋转卡壳)
题面 Bessie, Farmer John's prize cow, has just won first place in a bovine beauty contest, earning the ...
- linux下主机用户管理(完整详情)
(一) 创建新用户 useradd命令(也可以使用adduser)用来创建新的用户帐号,其命令格式如下: 表4-19 useradd命令常用选项 常用现象意 义 -d设置新用户的登陆目录 -e设置新用 ...
- webstorm提交版本时,忽略特定文件
项目提交时,部分本地配置文件,不需要提交,这时候需要在整个版本控制中忽略掉文件的提交. 操作如下: File -> Settings -> Version Control -> Ig ...
- 接触vsto,开发word插件的利器
研究word插件有一段时间了,现在该是总结的时候了. 首先咱们来了解下什么是vsto?所谓vsto,就是vs面向office提供的一个开发平台.一个开发平台至少包含两个要素:开发工具(sdk)和运行环 ...
- intellij idea快捷键字典
最近在重装系统,在安装python IDE时候依然安装了sublime Text3和intellij Idea(冏,别问为什么没安装pycharm,0-0 逃).首先是已然将之前一直使用的sublim ...
- Linux shell 脚本(二)
转载请标明出处: http://blog.csdn.net/zwto1/article/details/45078837: 本文出自:[明月的博客] 五.字符串处理 1.子串截取操作: 路径分割: ...
- UML类图三
2. 依赖关系 依赖(Dependency)关系是一种使用关系,特定事物的改变有可能会影响到使用该事物的其他事物,在需要表示一个事物使用另一个事物时使用依赖关系.大多数情况下,依赖关系体现在某个类的 ...
- windows xp/7/8/8.1/10安全模式详解和系统修复讲解
如果你的电脑因为各种原因(强关电脑等原因导致的电脑蓝屏,或者引导文件受损等)开不了机,进不了电脑桌面,那么就可以看看我这篇文章了. 先贴上百度百科,说得挺好的.最下面有我贴的图片操作过程详解. 百度百 ...
- JDK配置及tomcat部署
JDK配置及tomcat部署 2017-09-30-17:54:03 个人原创博客,转载请注明出处,作者,否则依法追究责任,文中引用了一些百度经验的图片,特此注明. 一,配置JDK:1.8.0_66版 ...
- ELK学习笔记(三)单台服务器多节点部署
一般情况下单台服务器只会部署一个ElasticSearch node,但是在学习过程中,很多情况下会需要实现ElasticSearch的分布式效果,所以需要启动多个节点,但是学习开发环境(不想开多个虚 ...