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. maven学习(2)-在Eclipse 中使用Maven

    第一节:m2eclipse 插件安装 打开Eclipse,点击菜单Help - > Install New Software 点击Add 按钮Name:m2e location: http:// ...

  2. RegExp实例

    ECMAScript通过RegExp类型来支持正则表达式,常见的正则表达式为:var expression = /pattern / flags;其中的模式(pattern)部分可以使任何简单或复杂的 ...

  3. word2vec剖析,资料整理备存

    声明:word2vec剖析,资料整理备存,以下资料均为转载,膜拜大神,仅作学术交流之用. word2vec是google最新发布的深度学习工具,它利用神经网络将单词映射到低维连续实数空间,又称为单词嵌 ...

  4. java如何写自己的native方法实现调用本地的c++库?

    等待编辑 1:首先可以找一本jni    java native interface相关的书籍来看.

  5. 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 ...

  6. 【Python编程:从入门到实践】chapter8 函数

    chapter8 函数 8.6 将函数存储在模块中 8.6.1 导入整个模块 要让函数是可导入的,的先创建模块.模块 的扩展名为.py的文件 import pizza 8.6.2 到导入特定的函数 f ...

  7. php上传文件涉及到的参数

          php上传文件涉及到的参数: 几个参数调整: 0:文件上传时存放文件的临时目录.必须是 PHP 进程所有者用户可写的目录.如果未指定则 PHP 使用系统默认值 php.ini文件中uplo ...

  8. Python正则总结

    re总结 限定符(就是控制重复次数) ? 匹配前面的子表达式零次或一次.例如,"do(es)?" 可以匹配 "do" . "does" 中的 ...

  9. ZABBIX监控80连接数

    自定义监控项(监控网站80连接数 http://blog.51cto.com/shuzonglu/2104195

  10. 35. CentOS-6.3安装Mysql-5.5.29

    安装方式分为rpm和源码编译安装两种,本文是采用mysql源码编译方式,编译器使用Cmake.软件需要mysql-5.5.29.tar.gz和cmake-2.8.10.2.tar.gz,请自行下载.下 ...