input上传图片
1.通过input自身的onchange事件触发:
<input id="file" type="file" accept="image/*" onchange='changeFile()'>
changeFile: function () {
let myFile = document.getElementById('file').files[0] // 获取图片内容
}
2.通过事件绑定触发:
<input id="file" type="file" accept="image/*">
changeFile: function () {
let file = document.getElementById('file')
file.addEventListener('change', function () {
let myFile = file.files[0] // 获取图片内容
})
}
changeFile()
input上传图片的更多相关文章
- 自定义input上传图片组件
自定义input上传图片组件,美化样式 前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~ 功能需求:1.上传图片限制大小.分辨率.类型 2.上传图片支持 ...
- input上传图片(file),预览图片的两种方法。blob与base64编码
上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...
- input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决
html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...
- 一个原生input上传图片记录
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- Js实现input上传图片并显示缩略图
用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果: FileReader 的 readAsDataURL() 先创建一个img标签,再用 fileReader 把input文件的赋值到img ...
- input上传图片并预览
首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...
- angularjs input上传图片前获取图片的Size
首先我们需要一个指令来追踪input的change.ngChage不适用input[file]. app.directive("fileread", [function () { ...
- input上传图片 显示预览信息
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- input上传图片预览
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- vue 利用原声input上传图片并预览并删除
<template> <div class="com-upload-img"> <div class="img_group"> ...
随机推荐
- maven学习(2)-在Eclipse 中使用Maven
第一节:m2eclipse 插件安装 打开Eclipse,点击菜单Help - > Install New Software 点击Add 按钮Name:m2e location: http:// ...
- RegExp实例
ECMAScript通过RegExp类型来支持正则表达式,常见的正则表达式为:var expression = /pattern / flags;其中的模式(pattern)部分可以使任何简单或复杂的 ...
- word2vec剖析,资料整理备存
声明:word2vec剖析,资料整理备存,以下资料均为转载,膜拜大神,仅作学术交流之用. word2vec是google最新发布的深度学习工具,它利用神经网络将单词映射到低维连续实数空间,又称为单词嵌 ...
- java如何写自己的native方法实现调用本地的c++库?
等待编辑 1:首先可以找一本jni java native interface相关的书籍来看.
- EC20 MODULE serial com log in passwd
ec20 module would print debug info via debug uart, and you can log in by user root, the passwd is qu ...
- 【Python编程:从入门到实践】chapter8 函数
chapter8 函数 8.6 将函数存储在模块中 8.6.1 导入整个模块 要让函数是可导入的,的先创建模块.模块 的扩展名为.py的文件 import pizza 8.6.2 到导入特定的函数 f ...
- php上传文件涉及到的参数
php上传文件涉及到的参数: 几个参数调整: 0:文件上传时存放文件的临时目录.必须是 PHP 进程所有者用户可写的目录.如果未指定则 PHP 使用系统默认值 php.ini文件中uplo ...
- Python正则总结
re总结 限定符(就是控制重复次数) ? 匹配前面的子表达式零次或一次.例如,"do(es)?" 可以匹配 "do" . "does" 中的 ...
- ZABBIX监控80连接数
自定义监控项(监控网站80连接数 http://blog.51cto.com/shuzonglu/2104195
- 35. CentOS-6.3安装Mysql-5.5.29
安装方式分为rpm和源码编译安装两种,本文是采用mysql源码编译方式,编译器使用Cmake.软件需要mysql-5.5.29.tar.gz和cmake-2.8.10.2.tar.gz,请自行下载.下 ...