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 ...
随机推荐
- Java 初始 多态
什么是多态 简单的来说就是具有多种形态的能力的特征 package ten; public interface Day1 { public void ring(); } package ten; pu ...
- 【SpringBoot】SpringBoot2.0响应式编程
========================15.高级篇幅之SpringBoot2.0响应式编程 ================================ 1.SprinBoot2.x响应 ...
- excel 表格粘贴到word 显示不完整
左上角,十字点,右键,取消固定宽度即可:
- Excel转datatable
如果想支持 .xls,.xlsx 两种格式 则必须安装一个exe文件,下载路径https://www.microsoft.com/zh-CN/download/details.aspx?id=1325 ...
- go环境变量与sublime Text3开发工具
环境:win7 1:下载安装包 (下载太慢了,上传至百度网盘了) 链接:https://pan.baidu.com/s/10wHOR01mW-kjdkynqu1F-g 密码:kv71 2:安装 ...
- 简述Ajax原理及实现步骤
简述Ajax原理及实现步骤 1.Ajax简介 概念 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML). 现在允许浏览器与务器通信 ...
- C++Primer第五版——习题答案详解(六)
习题答案目录:https://www.cnblogs.com/Mered1th/p/10485695.html 第7章 类 练习7.1 class Sales_data { public: std:: ...
- go语言学习--处理map的无序输出
最近工作中遇到了这样的一个场景,需要处理一个无限极分类的问题,对于数据结构的定义首先想到了,map,map[int]map[int]struct.通过两层map的定义归类parent_id和id的关系 ...
- [UE4]从零开始构建VR角色
一个工程是不是VR,并没有什么特别的地方,原则上任何工程都可以在VR设备下展示 一.新建一个名为“VRPawnBase”的Pawn. 二.在VRPawnBase中添加组件“Steam VRChaper ...
- CSS的background
.block{ width: 200px; height: 200px; padding: 25px; background-image:linear-gradient(#58a,#58a) ,lin ...