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文件放 ...
随机推荐
- IDEA2018全局搜索中搜索jar包/lib
搜索jar包 配置find in path ctrl+shift+f 点击 ...处 把lib添加进来 点击OK保存 之后在IDEA中 , 双击shift , 调出全局搜索框就可以搜索到 jar包里的 ...
- 安装cartographer遇到Unrecognized syntax identifier "proto3". This parser only recognizes "proto2"问题
https://stackoverflow.com/questions/38605734/mac-cannot-find-eigen3 https://blog.csdn.net/qq_4214518 ...
- ZR#957
ZR#957 解法: 首先 $ T $ 必须得要是 $ S $ 的子序列,不然不存在好的下标序列,因此一定无解. 考虑判断一个串 $ T $ 是不是 $ S $ 子序列的贪心做法:每次从没有匹配的位置 ...
- sqlserver数据库查询语句
--数据库所有表select * from sysobjects where type='u'; --指定表的所有列select name from syscolumns where id=(sele ...
- 使用spring profile实现多环境切换
第一步: applicationContext.xml <!--环境配置开始--> <beans profile="production"> <con ...
- STM32 + RT Thread OS 串口通讯
1. 创建项目 a) 禁用Finsh和console b) 默认情况下,项目文件包含了finsh,它使用COM1来通讯,另外,console输出(rt_kprintf)也使用了COM1.因 ...
- Django 测试开发5 unittest测试用例
Django测试用例 Django默认Python的标准库unittest编写测试用例.Django的单元测试类django.test.TestCase 从unittest.TestCase继承而来. ...
- E: dpkg was interrupted, you must manually run 'dpkg --configure -a' to correct the problem. 爆错解决办法
author :headsen chen date : 2019-06-06 10:09:06 root@ubuntu:~# apt-get remove java-1.8.0-openjdk E ...
- net start mysql 发生系统错误2 系统找不到指定的文件
以管理员身份运行,在命令行输入cd+mySQL的bin目录的安装路径 C:\Windows\system32>cd C:\Program Files\MySQL\MySQL Server5.6\ ...
- php 获得访问者的IP
<?php $user_IP = ($_SERVER["HTTP_VIA"]) ? $_SERVER["HTTP_X_FORWARDED_FOR"] : ...