在图片上传的时候,有时候后台需要前台上传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. 数据结构实验之图论十一:AOE网上的关键路径【Bellman_Ford算法】

    Problem Description 一个无环的有向图称为无环图(Directed Acyclic Graph),简称DAG图.     AOE(Activity On Edge)网:顾名思义,用边 ...

  2. vue的学习--如何使用Intellij IDEA配置并运行vue项目

    重新接触vue,开始学习使用IDE对vue项目进行配置和运行项目. 1.前面的准备 一般的教程都能到通过命令行运行npm run dev,并通过结果显示的端口,用浏览器访问自己的vue项目的结果.但是 ...

  3. C++标准库分析总结(四)——<Vector、Array、Forward_list设计原则>

    本节主要总结标准库Vector和Array的设计方法和特性以及相关迭代器内部特征 1.Vector 1.1 Vector 内部实现 Vector是自增长的数组,其实在标准库中没有任何一种容器能原地扩充 ...

  4. Java基础系列 - 数组、二维数组、对象数组

    package com.test2; public class demo2 { public static void main(String[] args) { /** * 一维数组使用 */ //数 ...

  5. [WEB安全]Dirsearch工具命令

    下载项目,并打开 ┌─[root@kali]─[/kali] └──╼ #git clone https://github.com/maurosoria/dirsearch ┌─[root@kali] ...

  6. postgresql 计算时间差的秒数、天数

    处理时间时用到了,记录一下. 计算时间差天数 select extract(day FROM (age('2017-12-10'::date , '2017-12-01'::date))); 计算时间 ...

  7. html,body设置{height:100%}[转]

    一般情况下,我们css控制的最高节点就是body,例如设置: body{background:#069;} 则浏览器界面就是完全的#068的背景色.这里看上去是<body>标签下的背景色起 ...

  8. 强大全面的C++框架和库推荐!

    C++ 资源大全 关于 C++ 框架.库和资源的一些汇总列表,内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和 ...

  9. window 下 某个端口被占用

    window 下 某个端口被占用 1. 开始—->运行—->cmd,或者是window+R组合键,调出命令窗口: 2.输入命令:netstat -ano,列出所有端口的情况.在列表中我们观 ...

  10. VS版本 与 VC版本 的对应关系

    Visual Studio 6 : vc6Visual Studio 2003 : vc7Visual Studio 2005 : vc8Visual Studio 2008 : vc9Visual ...