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 ...
随机推荐
- CSS3 实现圆形、椭圆形、三角形等各种形状样式
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...
- iis发布----在XP中发布高版本web遇到问题总结
解决方法是之前在网上看到的,总结一下. 我在vs2010中做的web网页,放到XP系统中发布是遇到问题,XP中的iis版本是iis. 提示.net framework版本上的问题. 1.在网站属性中把 ...
- nginx 信号
来源:nginx.cn Nginx信号控制 Nginx控制信号 TERM, INT 快速关闭 QUIT 从容关闭 HUP 重新加载,用新的配置开始新的工作进程 USER1 重新打开日志文件 USER2 ...
- 域名到站点的负载均衡技术一览(主要是探讨一台Nginx抵御大并发的解决方案)(转)https://www.cnblogs.com/EasonJim/p/7823410.html
一.问题域 Nginx.LVS.Keepalived.F5.DNS轮询,往往讨论的是接入层的这样几个问题: 1)可用性:任何一台机器挂了,服务受不受影响 2)扩展性:能否通过增加机器,扩充系统的性能 ...
- 将string转为同名类名,方法名。(c#反射)
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace stri ...
- windows shell命令相关
一 系统自带的命令 1 创建文件夹 mkdir 文件夹名 2 强制删除文件夹 rd/s/q 文件夹名 3 强制删除文件 del/f/s/q 文件名 4 移动文件到文件夹 move 文件名 文件夹名 二 ...
- JavaWeb——tomcat manager 403 Access Denied .You are not authorized to view this page.
403 Access Denied You are not authorized to view this page. If you have already configured the Manag ...
- Vue 封装的noData组件
<template> <div :style="{color: fontColor}" :class="['noDataView', iconType] ...
- java效率取随机不重复数
//效率取随机不重复数 public int[] takeRandom(int num) { Random rd = new Random(); int[] rds = new int[num];// ...
- WPF 后台重写 DataTemplate
/// <summary> /// 配置类 /// </summary> public static class GridControlDeploy { /// <sum ...