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. tmpfs临时文件系统,是一种基于内存的文件系统

    在Linux系统内存中的虚拟磁盘映射,可以理解为使用物理内存当做磁盘,利用这种文件系统,可以有效提高在高并发场景下的磁盘读写,但是重启后数据会丢失. 1.查看tmpfs路径 (系统默认开启,大小约为物 ...

  2. PythonStudy——数据类型总结 Data type summary

    按存储空间的占用分(从低到高) 数字 字符串 集合:无序,即无序存索引相关信息,可变.集合中的元素必须是可hash的,即不可变的数据类型. 元组:有序,需要存索引相关信息,不可变 列表:有序,需要存索 ...

  3. Java高级特性 第2节 java中常用的实用类(1)

    一.Java API Java API即Java应用程序编程接口,他是运行库的集合,预先定义了一些接口和类,程序员可以直接调用:此外也特指API的说明文档,也称帮助文档. Java中常用的包: jav ...

  4. DevExpress.XtraGrid.GridControl中数据源的绑定问题

    在利用DevExpress.XtraGrid.GridControl作为一个可编辑的表格控件时,在利用控件之前,先将一个初始化的DataTable对象作为GridControl的数据源进行绑定.可是在 ...

  5. InnoDB存储引擎文件

    InnoDB存储引擎文件 MySQL数据库包括数据库本身的文件和存储引擎文件.数据库自身的文件由参数文件(my.cnf).错误日志文件.慢查询日志文件.查询日志文件.二进制日志文件.套接字文件.pid ...

  6. Spring Boot - 配置介绍

    Spring Boot 针对常用的开发场景提供了一系列自动化配置来减少原本复杂而又几乎很少改动的模板配置内容,但是,我们还是需要了解如何在Spring Boot中修改这些自动化的配置,以应对一些特殊场 ...

  7. Parallel Programming for FPGAs 学习笔记(1)

    Parallel Programming for FPGAs 学习笔记(1)

  8. VS2012 安装 NPOI (管理NuGet程序包)

    问题背景 选择项目后右键==>管理NuGet程序包,搜索NPOI,返回服务器无法找到...404 解决方法: 第一步: 访问:https://www.nuget.org/api/v2/      ...

  9. 分享一个生成反遗忘复习计划的java程序

    想必这个曲线大家都认识,这是遗忘曲线,展示人的记忆会随着时间的延长慢慢遗忘的规律,同时还展示了如果我们过一段时间复习一次对遗忘的有利影响. 道理大家都懂,关键怎么做到? 靠在本子上记下今天我该复习哪一 ...

  10. python:推导式套路

    推导式套路 列表推导式为例的推导式详细格式,同样适用于其他推导式 variable = [out_exp_res for out_exp in input_list if out_exp == 2] ...