JS将本地图片转化成base64码
在图片上传的时候,有时候后台需要前台上传base64文件,这时候我们就需要将图片资源转化成base64,下面这段js代码就可实现此功能。
1、首先在html里定义一个input输入框:
BASE64图片: <input type="file" id="image"><br/>
<button id="up">上传</button>
2、通过js将图片资源转化成base64码:
$("#up").click(function(){
var reader = new FileReader();
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
var file = $("#image")[0].files[0];
var imgUrlBase64;
if (file) {
//将文件以Data URL形式读入页面
imgUrlBase64 = reader.readAsDataURL(file);
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通)
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败,请上传不大于2M的图片!');
return;
}else{
//执行上传操作
alert(reader.result);
}
}
}
});
结语:这里只是实现了将文件资源转化成base64码这个最基础的操作,网上有很多据此的扩展,下一篇我会根据网上的一些资源再做整理拓展。
JS将本地图片转化成base64码的更多相关文章
- JS将图片转换成Base64码
直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- Atitit. html 使用js显示本地图片的设计方案.doc
Atitit. html 使用js显示本地图片的设计方案.doc 1. Local mode 是可以的..web模式走有的不能兰.1 2. IE8.0 显示本地图片 img.src=本地图片路径无 ...
- js读取本地图片并显示
抄自 http://blog.csdn.net/qiulei_21/article/details/52785191 js读取本地图片并显示 第一种方法比较好 版权声明:本文为博主原创文章,未经博主允 ...
- 图片转化成base64字符串
package demo; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; public ...
- C#中将图片转化成base64字符串
厂址:http://www.cnblogs.com/yunfeifei/p/4165351.html 1.在C#中将图片转化成base64字符串: using System; using System ...
- Java对网络图片/本地图片转换成Base64编码和解码
一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...
- js把通过图片路径生成base64
主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 一.图片在本地服务器: var imgSrc = "img/1.jpg";//本地 ...
- js实现本地图片文件拖拽效果
如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- react - next.js 引用本地图片和css文件
1. 图片 把图片放在/static/文件夹中,在component中用img tag: <img src={'../static/icon.png'} /> 2. css 把css文件放 ...
随机推荐
- 初步学习MySQL
我们之前学习如何安装MySQL数据库 以及 navicat 管理数据库可视化工具 那么现在主要来学习一下如何使用,(操作数据库有很多方式,终端操作.可视化工具操作.编程语句操作) 我们首先学习在终端操 ...
- Python3 输入和输出(二)
接上一节 1.读写文件的模式图 将字符串写入到文件 foo.txt 中: #!/usr/bin/python3 # 打开一个文件f = open("/tmp/foo.txt", & ...
- 20165223《网络对抗技术》Exp6 信息搜集与漏洞扫描
目录 -- 信息搜集与漏洞扫描 实践说明 实践目标 基础知识问答 实践内容 各种搜索技巧的应用 Google搜索引擎扫描--Google Hacking msf搜索引擎扫描--搜索网址目录结构 搜索特 ...
- oracle中的cursor
游标是SQL的一个内存工作区,由系统或用户以变量的形式定义.游标的作用就是用于临时存储从数据库中提取的数据块.在某些情况下,需要把数据从存放在磁盘的表中调到计算机内存中进行处理,最后将处理结果显示出来 ...
- HTTP请求客户端工具类
1.maven 引入依赖 <dependency> <groupId>commons-httpclient</groupId> <artifactId> ...
- 真正解决方案:java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter
今天在使用JDK 12.0 环境下使用Hibernate 时候出现了这个错误,错误日志如下: 故障原因: JAXB API是java EE 的API,因此在java SE 9.0 中不再包含这个 Ja ...
- 网站url路径优化方法完全讲解 (url优化、基于tp5、API接口开发)
url优化可是网站开发的必备高阶技能,先看本实例优化前后效果比较: (同为调用前台模块下的index控制器下的index方法) 优化前:www.tp5.com/tp5/public/index.php ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_02-方法授权-需求分析
2 方法授权 2.1需求分析 方法授权要完成的是资源服务根据jwt令牌完成对方法的授权,具体流程如下: 1.生成Jwt令牌时在令牌中写入用户所拥有的权限 我们给每个权限起个名字,例如某个用户拥有如下权 ...
- mysql 对应数据库服务器配置 所能承受的tps和qps
总结: 吞吐量实际涵盖了TPS 和 QPS TPS 是指产生事物的请求,比如对数据库 增.删.改 QTP 是对数据库查询动作,无逻辑非事物,比如 查询 假如脚本里面都是get请求,那么出来的吞吐量就是 ...
- spark的task调度器(FAIR公平调度算法)
FAIR 调度策略的树结构如下图所示: FAIR 调度策略内存结构 FAIR 模式中有一个 rootPool 和多个子 Pool, 各个子 Pool 中存储着所有待分配的 TaskSetMagage ...