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的更多相关文章

  1. 图片Image转换为base64编码的方法

    1.FileReader 通过XMLHttpRequest请求图片Blob数据格式,然后利用FileReader转换为dataURL function toDataURL(url, callback) ...

  2. 找出html中的图片、包括css中的图片,读出图片数据转换为base64数据

    <?php echo ">> 图片的地址,css里面的要打单引号\r\n"; echo ">> 相同的图片,使用css实现图片地址只出现一次 ...

  3. jq获取图片的原始尺寸,自适应布局

    原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...

  4. 前端压缩图片,前端压缩图片后转换为base64.

    今天利用一上午研究了一下前端如何将5m左右的照片转换base64大小为 100k以内! 有两个链接:https://www.cnblogs.com/007sx/p/7583202.html :http ...

  5. 将文件转换为base64字符串,然后还原

    package com.um.banks.xinlian.utils; import java.io.File; import java.io.FileInputStream; import java ...

  6. 将图片转化为base64编码字符串

    pom依赖 <dependency> <groupId>org.ops4j.base</groupId> <artifactId>ops4j-base- ...

  7. node.js平台下,cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  8. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  9. nodejs抓取网络图片转换为base64编码的图片

    抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanp ...

随机推荐

  1. esxi5 的tart命令使用注意点

    esxi5.0 注意tar命令参数使用和centos6稍微有点不一样,注意下 注意需要把-f参数单独分离出来,紧接着文件.   而不能和cz命令一起用 ~ # touch abc.txt ~ # ec ...

  2. jQuery基础(二)DOM

    DOM节点的创建 jQuery节点创建与属性的处理 创建元素节点: $("<div></div>") 创建为文本节点: $("<div> ...

  3. zabbix图形化界面乱码(二)

      中文字体乱码,解决办法:   1:从Windos下拷贝字体到服务器,C:\Windows\Fonts,有很多,看着喜欢的拷贝   2:然后在zabbix 服务端,进入到zabbix web的工作目 ...

  4. react-native 获取组件的宽度和高度

    react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对 ...

  5. mysql中的锁

    MYSQL不同的存储引擎支持不同的锁的机制 MyISAM 支持表锁,InnoDB支持表锁和行锁 表锁,行锁比较 表锁:开销小,加锁快:不会出现死锁:锁定力度大,发生锁冲突概率高,并发度最低 行锁:开销 ...

  6. logback不输出日志消息,且SLF4J绑定源错误

    我之前的项目已经成功使用过logback作为日志输出,但是今天新项目在使用的时候,不输出日志信息. 最后终于找到问题所在,并成功解决.解决步骤如下: 第一步:检查pom.xml 按照以往惯例,我先检查 ...

  7. 报错:org.apache.hadoop.hive.metastore.HiveMetaException: Failed to get schema version.

    报错环境: CDH中集成的hive服务,启动报错,所以初始化一下元数据. 配置文件:/etc/hive/conf hive-site.xml 命令目录:/opt/cloudera/parcels/CD ...

  8. OpenStack的八年之痒

    2010年10月,OpenStack发布了第一个版本:上个月,发布了它的第18个版本Rocky.几年前气氛火爆,如今却冷冷清清.Rocky版本宣布后,OpenStack群里也就出现了几篇简短的翻译过来 ...

  9. CSS之padding&margin

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. C#控制台程序点击后暂停工作

    C#控制台应用程序,点击后就会暂停运行,但是我想让它运行不受点击的干扰.下面是程序演示: public void Test() { ThreadOut(); } private void Thread ...