在图片上传的时候,有时候后台需要前台上传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码的更多相关文章

  1. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. Atitit. html 使用js显示本地图片的设计方案.doc

    Atitit. html 使用js显示本地图片的设计方案.doc 1.  Local mode  是可以的..web模式走有的不能兰.1 2. IE8.0 显示本地图片 img.src=本地图片路径无 ...

  3. js读取本地图片并显示

    抄自 http://blog.csdn.net/qiulei_21/article/details/52785191 js读取本地图片并显示 第一种方法比较好 版权声明:本文为博主原创文章,未经博主允 ...

  4. 图片转化成base64字符串

    package demo; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; public ...

  5. C#中将图片转化成base64字符串

    厂址:http://www.cnblogs.com/yunfeifei/p/4165351.html 1.在C#中将图片转化成base64字符串: using System; using System ...

  6. Java对网络图片/本地图片转换成Base64编码和解码

    一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...

  7. js把通过图片路径生成base64

    主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 一.图片在本地服务器: var imgSrc = "img/1.jpg";//本地 ...

  8. js实现本地图片文件拖拽效果

    如何拖拽图片到指定位置,具体方法如下 在从本地上传图片的时候,如果使用拖拽效果,想想应该是更加的高大上,下面直接上js代码 完整代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  9. react - next.js 引用本地图片和css文件

    1. 图片 把图片放在/static/文件夹中,在component中用img tag: <img src={'../static/icon.png'} /> 2. css 把css文件放 ...

随机推荐

  1. Ansible管理上千台主机时需要的速度优化

    1 开启ssh长连接 OpenSSH 5.6版本后SSH支持了Multiplexing 设置参数 ssh_args = -C -o ControlMaster=auto -o ControlPersi ...

  2. SSO单点登录实例

    单点登录流程图 系统登陆拦截器 // // Source code recreated from a .class file by IntelliJ IDEA // (powered by Fernf ...

  3. LG5492 [PKUWC2018]随机算法

    题意 有一种贪心求最大独立集的算法: 随机一个排列 按顺序加入独立集,如果一个点能加入,就加入\({S}\) 给出一张图,问得出正确答案的概率. \(n \leq 20\) 传送门 思路 用 \(dp ...

  4. ISA真慢

    计划没有变化快,周一计划的任务几乎没怎么做,时间完全交给了一个BUG: 最近大家在做新主板的功能,同事说DeviceNet不通,尽管我对DeviceNet一点不懂,不过好歹之前测过CAN模块在新主板上 ...

  5. swoole的websockte例子

    服务器的环境,建议用bt.cn的一键环境 服务端: <?php /** * Created by PhpStorm. * User: Administrator * Date: 2019\5\2 ...

  6. Apache RocketMQ 的过去、现在和未来 原创: DataPipeline DataPipeline数见科技 前天

    Apache RocketMQ 的过去.现在和未来 原创: DataPipeline DataPipeline数见科技 前天

  7. API 设计 POSIX File API

    小结: 1. https://mp.weixin.qq.com/s/qWrSyzJ54YEw8sLCxAEKlA API 设计最佳实践的思考 谷朴 阿里技术 昨天   阿里妹导读:API 是模块或者子 ...

  8. Spring Cloud Eureka集群部署到Linux环境

    还是三板斧:先改配置文件,支持集群,然后出包,上传到linux环境(3个节点),最后启动jar包跑起来. 1.在原eureka服务端代码(参见Greenwich.SR2版本的Spring Cloud ...

  9. APP手工测试01-app专项测试要点-测试、开发环境-敏捷开发

    APP专项测试要点 兼容性测试 安装,卸载,升级 交叉事件 PUSH消息推送测试 性能测试 其他类型 兼容性测试 手机型号 系统版本 安卓 (版本4.4开始兼容) IOS(版本9.x开始兼容) 屏幕尺 ...

  10. Django之form表单验证顺序

    概述 django框架提供了一个forms类,来处理web开发中的表单相关事项.众所周知,form最常做的是对用户输入的内容进行验证,为此django的forms类提供了全面的内容验证支持. 验证过程 ...