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. cordova日期插件的使用:cordova-plugin-datepicker

    1. 添加插件:cordova plugin add cordova-plugin-datepicker; 2.插件的主体样式设置: 3.以上5中样式的截图: THEME_TRADITIONAL的样式 ...

  2. Ansible 快速部署 Zabbix 4

    阅读本文章需要具有Ansible.Zabbix基础.本次教程基于如下环境: CentOS 7.x Zabbix 4.0 Ansible 2.5 服务器初始化 关闭防火墙.selinux,添加epel常 ...

  3. postgresql jdbc 连接数据库测试

    转载自:http://blog.csdn.net/southflow/article/details/5944107 1. 下载postgresql-8.4-702.jdbc4.jar  2. 点击 ...

  4. LiveBindings如何绑定一个对象(转)

    原文 http://www.malcolmgroves.com/blog/?p=1084 一.新建VCL工程加入TAdapterBingSource控件 二.定一个TPerson类 MyPerson ...

  5. 京东返利渠道,自己拿返利,无需A推B操作

    京东返利渠道,自己拿返利,无需A推B操作,简单快捷方便 1.在微信小程序中搜索 “京东饭粒” 2.进入京东饭粒,进购物车下单(只能在购物车内下单返利) 3.收货后26天返京豆到你的京东账号中,”佛系返 ...

  6. 网络共享存储服务NFS

    网络共享存储服务NFS 作者:Eric 微信:loveoracle11g 环境准备 服务器系统 角色 IP RHEL 7.5 x86-64 NFS服务端 192.168.10.201 RHEL 7.5 ...

  7. 记录 Ext 日历月份选择控件bug解决过程结果

    目录 背景 代码 背景 项目使用 Ext.NET 2.2.0.40838 , 对应 Ext JS4.2 版本. 结果 2017/3/31 号的时候偶然间点日历选择控件选择2月,10月等月份突然就跳到3 ...

  8. FlexItem 多行测试

    flex: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  9. REST framwork之解析器

    一 我们首先要知道解析器是什么以及他的功能: REST framework 包含许多内置的解析器类,允许接受各种媒体类型(media types)的请求.还支持自定义解析器,这使你可以灵活地设计 AP ...

  10. Problem B: 取石子

    转换成一个数在(0,X + Y)的加减问题 考虑一种使用线段树处理的方法, 维护前缀最大值, 前缀最小值, 前缀和, 然后查询的时候先询问右区间是否会同时碰到上下界, 会的话左区间无用直接递归右区间, ...