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 ...
随机推荐
- spring IOC 和AOP 方面
spring 的2大核心 是Ioc 和 aop spring的依赖注入:在程序运行期间,由外部容器动态的将依赖对象注入到组件中 IOC: 实例化spring容器的二种方法 第一种:在类路径下寻找配 ...
- k8s-YAML配置文件(转)
转自http://www.cnblogs.com/bigberg/p/9203619.html 一.YAML基础 YAML是专门用来写配置文件的语言,非常简洁和强大,使用比json更方便.它实质上是一 ...
- javascript运行机制之执行顺序详解
1.代码块 指的的是有标签分割的代码段. 例如: <script type="text/javascript"> alert("这是代码块一"); ...
- threading模块小结
这篇文章是别人文章的一个观后小结,不是什么原创. 首先第一个例子: import threading import time def worker(): print "worker& ...
- Azure CosmosDB (2) CosmosDB中的数据一致性
<Windows Azure Platform 系列文章目录> 为了保证分布式数据库的高可用性和低延迟性,我们需要在可用性.延迟和吞吐量之间进行权衡. 绝大部分的商业分布式数据库,要求开发 ...
- Android App启动速度优化
解决在桌面上点击APP图标后经过一两秒后才显示页面,以及App启动后主界面显示过慢问题 一.应用的启动方式 1.冷启动:当启动应用时,后台没有该应用的进程,这时系统会首先会创建一个新的进程分配给该应用 ...
- linux git pull/push时提示输入账号密码之免除设置
1.先cd到根目录,执行git config --global credential.helper store命令 [root@iZ25mi9h7ayZ ~]# git config --global ...
- react使用ant-design组件库
新建项目并引入组件 1,全局安装脚手架 npm install -g create-react-app 2,新建项目 create-react-app reactantd 3,安装组件 npm ins ...
- WordPress版微信小程序2.1.5版发布
WordPress版微信小程序功能已经基本完善,利用这套程序,搭配WordPress提供的rest api,WordPress网站的站长可以快速搭建属于自己的网站微信小程序 . WordPress版微 ...
- ie和dom事件流的区别
1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: 复制代码代码如下: <body> <div> <button& ...