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. IIS发布错误及解决

    HTTP 错误 403.14 - Forbidden  解决办法: 打开iis管理器,找到对应网站,并找到目录浏览,双击打开. 点击启用即可. HTTP 错误 500.19 - Internal Se ...

  2. qsort函数排序各种类型的数据。

    qsort函数是库函数中的一员,我们先来看看官方文档是怎么写的: 其中qsort的参数void* base是传入一个数组,size_t num 为数组整体大小,size_t size 为单个元素的大小 ...

  3. OpenLDAP主从

    yum -y install compat-openldap必须得安装这个   1:在主上       备份         cp /etc/openldap/slapd.conf /etc/open ...

  4. laravel 路由分組

    laravel 路由分組 Route::group(['prefix' => 'admin'], function () { $namespacePrefix="\\App\\Http ...

  5. Ubuntu更新时提示错误 E: Sub-process /usr/bin/dpkg returned an error code (1)

    $ sudo su //root权限 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_old //现将info文件夹更名 $ sudo mkdir /v ...

  6. bzoj5048: 塌陷的牧场

    Description 农夫小Q将他的奶牛们饲养在一个长n宽m的矩形网格牧场中.行从上到下依次编号为1到n,列从左往右依次编号为1 到m.为了防止奶牛们逃跑,小Q在牧场外圈安装了一排电网,只要奶牛走出 ...

  7. JAVA web端JS下载excel文件

    JSP代码如下: JSP端引入jquery.easyui.min.js库: <script type="text/javascript" src="<c:ur ...

  8. react使用ant-design组件库

    新建项目并引入组件 1,全局安装脚手架 npm install -g create-react-app 2,新建项目 create-react-app reactantd 3,安装组件 npm ins ...

  9. 20145319 《网络渗透》MS08_067安全漏洞

    20145319 <网络渗透>MS08_067安全漏洞 一 实验内容 了解掌握metasploit平台的一些基本操作,能学会利用已知信息完成简单的渗透操作 了解漏洞MS08_067的相关知 ...

  10. 一个简单的通讯服务框架(大家发表意见一起研究)JAVA版本

    最近研究下java语言,根据一般使用的情况,写了个连接通讯服务的框架: 框架结构 C-Manager-S; 把所有通讯内容抽取成三个方法接口:GetData,SetData,带返还的Get; 所有数据 ...