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上传图片的更多相关文章

  1. 自定义input上传图片组件

    自定义input上传图片组件,美化样式 前段时间因为项目需求,做过一个上传图片组件,这里分享下大致思路,希望对有需要的童鞋有所帮助~~~ 功能需求:1.上传图片限制大小.分辨率.类型 2.上传图片支持 ...

  2. input上传图片(file),预览图片的两种方法。blob与base64编码

    上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...

  3. input 上传图片显示预览、调用摄像头,ios和Android的兼容性解决

    html代码: <img id="pic" src="img/pic.png"/> </span><input id=" ...

  4. 一个原生input上传图片记录

    html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. Js实现input上传图片并显示缩略图

    用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果: FileReader 的 readAsDataURL() 先创建一个img标签,再用 fileReader 把input文件的赋值到img ...

  6. input上传图片并预览

    首先说一下input 大家都知道上传文件,图片是通过input 的file进行上传的. 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file&q ...

  7. angularjs input上传图片前获取图片的Size

    首先我们需要一个指令来追踪input的change.ngChage不适用input[file]. app.directive("fileread", [function () { ...

  8. input上传图片 显示预览信息

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. input上传图片预览

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  10. vue 利用原声input上传图片并预览并删除

    <template> <div class="com-upload-img"> <div class="img_group"> ...

随机推荐

  1. ROS+L2TP+IPSEC

    在WIN7X64,WIN8.1,WIN10,MACBOOK和苹果的IOS10调试L2TP/IPSEC通过 请注意IPSEC,要求客户端IP必须唯一,不可以有重复,那么访问VPN服务器的客户端IP,就不 ...

  2. Appium+python自动化8-Appium Python API

    Appium+python自动化8-AppiumPython API   前言: Appium Python API全集,不知道哪个大神整理的,这里贴出来分享给大家. 1.contexts conte ...

  3. 第10课 C++中的新成员

    1. 动态内存分配 (1)C++通过new关键字进行动态内存申请,是以类型为单位来申请空间大小的 (2)delete关键字用于内存释放 ▲注意释放数组时要加[],否则只释放这个数组中的第1个元素. [ ...

  4. spark 多语言编程

    参考官方地址:https://spark.apache.org/docs/1.6.2/programming-guide.html 误解: spark多语言的支持,并不是说spark可以操作各个语言写 ...

  5. maven快速入门之安装

    maven是基于项目对象模型(pom) 可以通过y一小段描述信息来管理项目的构建,报告,和文档的软件项目管理工具. 覆盖编译,测试运行清理构建周期,提供仓库的概念,统一帮助管理项目. 下载:http: ...

  6. 搭建pyspider爬虫服务

    1. 环境准备 首先yum更新 yum update -y 安装开发编译工具 yum install gcc gcc-c++ -y 安装依赖库 yum install python-pip pytho ...

  7. CSS3基础

    内容: 1.圆角 border-radius 2.阴影 text-shadow.box-shadow 3.渐变 linear.radial 4.rgba rgb+alpha opacity 5.tra ...

  8. UVA350-水题

    #include<iostream> using namespace std; int main() { int c = 0; int Z, L, I, M; while (cin > ...

  9. Linux下类似windows下_beginthread和_endthread 的多线程开发

    在 windows下头文件中包含 #include<process.h> 就可以使用_beginthread进行线程创建.个人感觉挺方便的. 在linux下类似于_beginthread ...

  10. python 逐行读取文本

    f = open("foo.txt") # 返回一个文件对象line = f.readline() # 调用文件的 readline()方法while line: print li ...