将input type="file" 类型的图片文件转成base64
带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了。话不多少,看代码:
首先定义一个类型为file的input标签还要定义一个onchange事件,并传入一个event参数。
<div>
<input type="file" id="imgTest" type="file" onchange="imgChange(event)" accept=".gif,.jpg,.jpeg,.png">
</div>
<img src="" id="showImage" alt="">
在这个onchange事件方法中会接收一个event参数,我们可以在这个参数中拿到这个input的标签对象还可以拿到这个文件。
function imgChange(e) {
console.info(e.target.files[0]);//图片文件
var dom =$("input[id^='imgTest']")[0];
console.info(dom.value);//这个是文件的路径 C:\fakepath\icon (5).png
console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
console.info(this.result); //这个就是base64的数据了
var sss=$("#showImage");
$("#showImage")[0].src=this.result;
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
}
拓展 : 把页面中的图片变成base64的数据
<!--这里先搞上一张图片-->
<img id="img" src="/img/my.jpg" alt="" style="width: 150px;height: 150px"> <input type="button" onclick="imgChaneBase64()" value="img标签绘制到canvas" /><br />
<!--引入html2canvas-->
<script type="text/javascript" src="/lib/html2canvas/html2canvas.js"></script>
<script type="text/javascript">
function imgChaneBase64() {
//将要变成base64的图片的html标签当参数传进来,这里如果将document传进来,就会将整个页面变成图片,在then中会返回一个canvas
html2canvas(document.getElementById("img")).then(function(canvas) {
console.info(canvas);
var imgData = canvas.toDataURL("image/png"); //这里会将canvas转化为base64的数据
document.body.appendChild(canvas); //页面鼠标右击这个标签时会提示保存图片,保存之后会以png格式保存 });
}
</script>
这里要注意的是这种方法其实利用的是截屏的原理,将html内容变成base64的,所有其实不是真的将这个图片变成base64。
将input type="file" 类型的图片文件转成base64的更多相关文章
- input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
- js如何将选中图片文件转换成Base64字符串?
如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...
- php 将图片文件转成base64编码的方法
php 将图片文件转成base64编码的方法<pre><?php /** 文件转base64输出 * @param String $file 文件路径 * @return Strin ...
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- <input type="file"> accept属性筛选文件类型
如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性. 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: <input ty ...
- input type='file'限制上传文件类型
前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so easy啊,没什么嘛 ...
- input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。
不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...
- input type file onchange上传文件的过程中,同一个文件二次上传无效的问题。
不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...
- 图片文件转换成Base64编码实现ajax提交图片
//上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...
随机推荐
- Android数据存储之SQLite 数据库学习
Android提供了五种存取数据的方式 (1)SharedPreference,存放较少的五种类型的数据,只能在同一个包内使用,生成XML的格式存放在设备中 (2) SQLite数据库,存放各种数据, ...
- JS/Java/Python格式化金额
//java代码 public static void main(String[] args) { DecimalFormat myformat = new DecimalFormat(); ...
- 徐州网络赛B-BE,GE or NE【记忆化搜索】【博弈论】
In a world where ordinary people cannot reach, a boy named "Koutarou" and a girl named &qu ...
- 徐州网络赛C-Cacti Lottery【DFS】
54.19% 2000ms 262144K Morgana is playing a game called cacti lottery. In this game, morgana has a 3 ...
- 翻译:Addressing tiles: same tile bounds with different indexes
原文链接:http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/ Addressing tiles: same ...
- 【开发者笔记】MQTT python测试笔记
MQTT是基于订阅/发布的物联网协议. python测试需要一个发送进程和接收进程,即一个发送客户端和一个接收客户端,如果这两个客户端工作在同一个topic下,那么就能进行消息互通了. 服务器用“io ...
- IETF国标查询
IETF官网 https://www.ietf.org/ rfc国标官网 https://www.ietf.org/standards/rfcs/ rfc国标查询 https://www.rfc-ed ...
- Spark Core (一) 什么是RDD的Transformation和Action以及Dependency(转载)
1. Spark的RDD RDD(Resilient Distributed Datasets),弹性分布式数据集,是对分布式数据集的一种抽象. RDD所具备5个主要特性: 一组分区列表 计算每一个数 ...
- 使用jQuery包装节点
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- docker——三剑客之Docker Compose
编排(Orchestration)功能是复杂系统实现灵活可操作性的关键.特别是在Docker应用场景中,编排意味着用户可以灵活的对各种容器资源实现定义和管理. 作为Docker官方编排工具,Compo ...