input file转base64
不想用canvas转
<input type="file" id="file" accept="image/*" onchange="changeImg()"/>
<script> function blobToDataURL(blob,cb) {
let reader = new FileReader();
reader.onload = function (evt) {
var base64 = evt.target.result
cb(base64)
};
reader.readAsDataURL(blob);
} var file = document.getElementById("file");
function changeImg() {
var img = file.files[0]
if(img){
var url = URL.createObjectURL(img);
var base64 = blobToDataURL(img,function(base64Url) {
console.log(base64Url)
})
}
}
input file转base64的更多相关文章
- JS input file 转base64 JS图片预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- input file获取选择图片的本地路径和base64路径
input file获取选择图片的本地路径和base64路径 本地路径: myHeadFile: function (e) { // 这里是input file 的onchange事件 ] const ...
- JQuery input file 上传图片
表单元素file设置隐藏,通过其他元素打开: .imgfile为input file $(".ul").click(function () {return $(".img ...
- HTML中上传与读取图片或文件(input file)----在路上(25)
input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...
- Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案
原文地址:Apache服务器网站访问伪静态内页出现No input file specified.的完美解决方案 启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:&quo ...
- 编译安装mmseg提示cannot find input file: src/Makefile.in错误
今天安装中文词检索功能模块 coreseek,其中一个分词模块 mmseg ,编译安装到最后,出现annot find input file: src/Makefile.in aclocal // ...
- HTML5的 input:file上传类型控制
一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...
- input file控件限制上传文件类型
网页上添加一个input file HTML控件: <input id="File1" type="file" /> 默认是这样的,所有文件类型都会 ...
- 完美解决 nginx No input file specified.
一次开发中遇到了这个问题:No input file specified nginx版本1.8 找遍网络都是说 fastcgi_param SCRIPT_FILENAME $document_root ...
随机推荐
- js 判断对象的长度
Object.size = function(obj) { var size = 0, key; for (key in obj) { if (obj.hasOwnProperty(key)) siz ...
- Html5 学习笔记 【PC固定布局】 实战5 咨询页面 侧栏
最终效果图: 提出公共页脚和导航部分: 新建infomatino.html (旅游咨询)页面 <!DOCTYPE html> <html lang="zh-cn" ...
- spring boot 尚桂谷学习笔记04 ---Web开始
------web开发------ 1.创建spring boot 应用 选中我们需要的模块 2.spring boot 已经默认将这些场景配置好了 @EnableAutoConfiguration ...
- 基于全局地址池的DHCP
一.实验目的 二.实验拓扑图 .三.实验编址 四.实验步骤 1.配置IP 2.配置基于全局地址池的DHCP server 使用IP pool命令创建一个新的全局地址池,名称为hjt1 配置hjt1可动 ...
- idea新手教程 如何springmvc创建Maven项目
1.点击Create project,选择maven,勾选Create from archetype选择web-app,如图 2 输入 Group-Id //组织名,也是作者名 Arti ...
- MySQL分表备份
#!/bin/bash DUMP=/usr/bin/mysqldump MYSQL=/usr/bin/mysql IPADDR=127.0.0.1 PORT=3306 USER=abc PASSWD= ...
- 整理eclipse,升级jdk环境小记录
这2天在整理项目: 需要把eclipse 32位,jdk1.6 32位的更改为eclipse 64位,jdk1.8 64位版本的,于是我就在一台window7的电脑上直接操作,遇到了一下几点问题,记录 ...
- HDU 1577 WisKey的眼神
WisKey的眼神 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...
- RabbitMq--4--集群(转载)
RabbitMQ消息服务用户手册 1 基础知识 1.1 集群总体概述 Rabbitmq Broker集群是多个erlang节点的逻辑组,每个节点运行Rabbitmq应用,他们之间共享用户.虚拟主机.队 ...
- Java面试宝典(4)Java基础部分
71.说出一些常用的类,包,接口,请各举5个 要让人家感觉你对java ee开发很熟,所以,不能仅仅只列core java中的那些东西,要多列你在做ssh项目中涉及的那些东西.就写你最近写的那些程序中 ...