jq获取图片并转换为base64
html代码:
<input type="file" id="file1"/>
jq代码:
$('#file1').change(function(e){
var imgBox = e.target;
uploadImg($('.file1'), imgBox)
});
function uploadImg(element, tag ) {
var file = tag.files[0];
var imgSrc;
if (!/image\/\w+/.test(file.type)) {
alert("请上传图片!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
//console.log(this.result);
imgSrc = this.result;
$(element).attr("src", imgSrc);
};
}
jq获取图片并转换为base64的更多相关文章
- 图片Image转换为base64编码的方法
1.FileReader 通过XMLHttpRequest请求图片Blob数据格式,然后利用FileReader转换为dataURL function toDataURL(url, callback) ...
- 找出html中的图片、包括css中的图片,读出图片数据转换为base64数据
<?php echo ">> 图片的地址,css里面的要打单引号\r\n"; echo ">> 相同的图片,使用css实现图片地址只出现一次 ...
- jq获取图片的原始尺寸,自适应布局
原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...
- 前端压缩图片,前端压缩图片后转换为base64.
今天利用一上午研究了一下前端如何将5m左右的照片转换base64大小为 100k以内! 有两个链接:https://www.cnblogs.com/007sx/p/7583202.html :http ...
- 将文件转换为base64字符串,然后还原
package com.um.banks.xinlian.utils; import java.io.File; import java.io.FileInputStream; import java ...
- 将图片转化为base64编码字符串
pom依赖 <dependency> <groupId>org.ops4j.base</groupId> <artifactId>ops4j-base- ...
- node.js平台下,cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
- nodejs抓取网络图片转换为base64编码的图片
抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanp ...
随机推荐
- esxi5 的tart命令使用注意点
esxi5.0 注意tar命令参数使用和centos6稍微有点不一样,注意下 注意需要把-f参数单独分离出来,紧接着文件. 而不能和cz命令一起用 ~ # touch abc.txt ~ # ec ...
- jQuery基础(二)DOM
DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: $("<div></div>") 创建为文本节点: $("<div> ...
- zabbix图形化界面乱码(二)
中文字体乱码,解决办法: 1:从Windos下拷贝字体到服务器,C:\Windows\Fonts,有很多,看着喜欢的拷贝 2:然后在zabbix 服务端,进入到zabbix web的工作目 ...
- react-native 获取组件的宽度和高度
react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对 ...
- mysql中的锁
MYSQL不同的存储引擎支持不同的锁的机制 MyISAM 支持表锁,InnoDB支持表锁和行锁 表锁,行锁比较 表锁:开销小,加锁快:不会出现死锁:锁定力度大,发生锁冲突概率高,并发度最低 行锁:开销 ...
- logback不输出日志消息,且SLF4J绑定源错误
我之前的项目已经成功使用过logback作为日志输出,但是今天新项目在使用的时候,不输出日志信息. 最后终于找到问题所在,并成功解决.解决步骤如下: 第一步:检查pom.xml 按照以往惯例,我先检查 ...
- 报错:org.apache.hadoop.hive.metastore.HiveMetaException: Failed to get schema version.
报错环境: CDH中集成的hive服务,启动报错,所以初始化一下元数据. 配置文件:/etc/hive/conf hive-site.xml 命令目录:/opt/cloudera/parcels/CD ...
- OpenStack的八年之痒
2010年10月,OpenStack发布了第一个版本:上个月,发布了它的第18个版本Rocky.几年前气氛火爆,如今却冷冷清清.Rocky版本宣布后,OpenStack群里也就出现了几篇简短的翻译过来 ...
- CSS之padding&margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C#控制台程序点击后暂停工作
C#控制台应用程序,点击后就会暂停运行,但是我想让它运行不受点击的干扰.下面是程序演示: public void Test() { ThreadOut(); } private void Thread ...