在图片上传的时候,有时候后台需要前台上传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. 数据结构实验之图论二:图的深度遍历(SDUT 2107)(简单DFS)

    题解:图的深度遍历就是顺着一个最初的结点开始,把与它相邻的结点都找到,也就是一直往下搜索直到尽头,然后在顺次找其他的结点. #include <bits/stdc++.h> using n ...

  2. [access]第一篇-平台

    [access]第一篇-平台 上海盟威软件有限公司http://www.accessoft.com/ 下载地址http://www.accessgood.com/ 中山市天鸣科技发展有限公司http: ...

  3. 第二次作业社团UML图

    第二次作业 UML图 用例图: 时序图: 申请加入社团 学生可以在页面投递社团加入申请,送交给社团管理员审批 社团活动审批 团委通过社团提交胡活动进行审批 评价活动 社团活动举行完,会有相应的团委和学 ...

  4. C#图片灰度处理(位深度24→位深度8)、C#图片二值化处理(位深度8→位深度1)

    C#图片灰度处理(位深度24→位深度8) #region 灰度处理 /// <summary> /// 将源图像灰度化,并转化为8位灰度图像. /// </summary> / ...

  5. ML_Review_PCA(Ch4)

    Note sth about PCA(Principal Component Analysis)   ML6月20日就要考试了,准备日更博客,来记录复习一下这次ML课所学习的一些方法. 博客是在参考老 ...

  6. pgpool 的配置文件详解

    listen_addresses = 'localhost' # Host name or IP address to listen on: # '*' for all, '' for no TCP/ ...

  7. Mac升级Node.js和npm到最新版本指令

    一.查看本机当前Node.js和npm版本 node -v npm -v 二.清除node.js的cache sudo npm cache clean -f 三.安装"n"版本管理 ...

  8. SIT测试 和 UAT测试

    在企业级软件的测试过程中,经常会划分为三个阶段——单元测试,SIT和UAT,如果开发人员足够,通常还会在SIT之前引入代码审查机制(Code Review)来保证软件符合客户需求且流程正确.下面简单介 ...

  9. Linux下设置Tomcat开机自启动

    --未验证 第一步:在/etc/init.d下新建一个文件tomcat(需要root操作权限) vi /etc/init.d/tomcat 然后点击"i"写下如下代码,tomcat ...

  10. (三)表单与servlet的初步结合

    一.form表单基本使用 <form>标签可创建一个表单,属性如下: <form>标签子标签可以有如下: <input> : 用于搜集用户信息. <input ...