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"> ...
随机推荐
- MySQL-Jira双机热备
主服务器:192.168.1.23 从服务器:192.168.1.243 一.主服务器Master配置 1. 创建同步账号.赋权 在主服务器上为从服务器建立一个连接帐户,此处用root,该帐户必须授予 ...
- https的加密解密是怎么写的?
原文转载至:http://blog.csdn.net/aqiangsz/article/details/53611665 文章中有些不对的地方,比如用证书对改随机码进行加密,这个是不对,证书本身并没有 ...
- 第10课 C++中的新成员
1. 动态内存分配 (1)C++通过new关键字进行动态内存申请,是以类型为单位来申请空间大小的 (2)delete关键字用于内存释放 ▲注意释放数组时要加[],否则只释放这个数组中的第1个元素. [ ...
- 超全整理!Linux性能分析工具汇总合集
转自:http://rdc.hundsun.com/portal/article/731.html?ref=myread 出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章. ...
- 无法打开物理文件 XXX.mdf"。操作系统错误 5:"5(拒绝访问。)"的解决办法
附加数据库时报错: 无法打开物理文件 XXX.mdf".操作系统错误 5:"5(拒绝访问.)" 原因是数据库权限无法读取路径下的文件. 解决方案 一: 数据库使用wind ...
- 学习MongoDB 八: MongoDB索引(索引限制条件)(二)
一.简介 我们上一篇介绍了索引基本操作,通过db.collection.createIndex(keys, options)语法创建索引,我们继续介绍地理空间索引.索引的限制,使我们在MongoDB时 ...
- uva216-枚举-简单题
题意:n个计算机通过电缆连接,怎么连接使用的电缆最少 mmp,死wa不过,memset(vis,0,sizeof(per)),太不小心了 #include <iostream> #incl ...
- LaTeX 公式字体大小设置
字体大小: 七号 5.25pt 1.845mm \tiny六号 7.875pt 2.768mm \scriptsize小五号 9pt 3.163mm \footnotesize五号 10.5p ...
- JS获取最终样式
在使用jqery时,操作什么都很方便,比如获取CSS样式,直接.css加样式名就可以获取你要的,但是JS,就麻烦点,因为有兼容问题,要做兼容,而jqery都是做好了的, 下面就是使用JS获取CSS样式 ...
- Socket Error # 10013 Access denied
--------------------------- Debugger Exception Notification --------------------------- Project xxx. ...