input输入框[type=file]上传图片文件转base64数据
input输入框[type=file]上传图片文件转base64数据
1、input图片文件选择标签
<input id="upload_file" type="file" accept="image/*" />
2、获取input选择图片地址,并创建Image对象
$('#upload_file').change(function () {var url, imgbase64;//获取file对象URL if (navigator.userAgent.indexOf("MSIE") >= 1) { // IEurl = document.getElementById('upload_file').value;} else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefoxurl = window.URL.createObjectURL(document.getElementById('upload_file').files.item(0));} else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chromeurl = window.URL.createObjectURL(document.getElementById('upload_file').files[0]);}// 创建Image对象var image = new Image();image.src = url;image.onload = function () {imgbase64 = getBase64Image(image);}
});
3、获取选择图片base64数据
function getBase64Image(img) {var canvas = document.createElement("canvas");var width = img.naturalWidth || img.width;var height = img.naturalHeight || img.height;canvas.width = width;canvas.height = height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, width, height); // 绘制图像var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 图片格式var dataURL = canvas.toDataURL("image/" + ext); // 包含图片展示的 data URIreturn dataURL;
}
input输入框[type=file]上传图片文件转base64数据相关推荐
- html表单input file,input标签type=file的文件上传
一,通过表单提交的方式 该提交方式只是提交普通表单:对于file组所选中的文件内容是不上传的,因此需要设置:enctype属性 enctype="multipart/form-data&qu ...
- Magento利用input type=”file”上传图片
2019独角兽企业重金招聘Python工程师标准>>> 首先在模板文件加个表单,内容如下: <form action="<?php echo $this-> ...
- html5 中input type=‘file’实现文件图片等的上传的文件类型限制
可以直接设置input标签的accept属性来限制上传文件的类型 <input type="file" accept="application/msword&quo ...
- 安卓微信内置浏览器 input type=file 选择文件未响应
微信内置浏览器采用以下形式选择图片不响应 <input type="file" accept="image/*"/> 解决思路 步骤一.调微信接口得 ...
- H5(移动端)前端使用input type=file 上传图片,调用相机和相册
<input class="addPicInput" type="file" ref="uploadFile"@change=&quo ...
- 上传文件input(type=file)美化。
input file 把之前的按钮透明度opacity设置为0,外层用div包裹. 1 <div class="uploadButDiv greenButton text-center ...
- 关于input type=file 限制文件上传类型
HTML <input> 标签的 accept 属性 <input type="file" name="pic" id="pic&q ...
- input输入框type参数
今日闲来无事,把所有的输入框type属性都试了一遍. 一共呢,是有23个参数. <form action=""> <input type="text&q ...
- 上传pdf文件转图片翻页小工具,遇到JSP form中type=file的文件上传及后台Part处理问题(后台取值为null)
最近公司要求做一个上传pdf文件后将文件转换为翻页图片的小工具,我是这么做的 1.先找图片翻页的demo,微软有现有的产品turn.js感兴趣的可以自己看一下 ,有双页的有单页的,因为我司要求手机端使 ...
- 项目总结(input输入框type设置为number,maxlength无效,设置为tel,maxlength有效)
这是一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了,然后我就去百度了一 ...
最新文章
- hihocoder1479 三等分
- 欧拉降幂及其扩展欧拉降幂
- Behavior Designer笔记
- mysql 组合索引
- Jdbc普通查询、流式查询、游标查询
- selenium webdriver处理HTML5的视频播放
- C语言之共享内存shm_open(二十五)
- 去除A和B数组中的交集
- css实现时间数字特效字体格式
- 海康摄像机激活失败解决方法
- 微信dat文件用什么软件打开方式_dat文件用什么打开 微信电脑图片dat转为jpg
- 班级随机点名html,提问之星随机点名随机抽取班级学生教程
- 《货币金融学》学习笔记
- 红杉资本投资的企业汇总
- 国信证券有限责任公司关于创设南航认沽权证的公告
- L1-7 机工士姆斯塔迪奥【C语言】
- android下载文件地址,安卓迅雷下载的文件在哪里迅雷下载文件存放位置-独木成林...
- C# Culling Mask
- ffmpeg js转换音频_webRTC使用ffmpeg.js将webm转换为mp4
- Android android_id, deviceId, oaid的区别