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. shell 11函数

    函数定义 function 方法名(){ command return int; } 注意:function可加可不加 #shell #!/bin/sh function fun1(){ echo & ...

  2. ROS+L2TP+IPSEC

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

  3. php file_exists无效解决办法

    一:is_file 和 file_exists 的区别:当文件存在时:is_file 比 file_exists快了N倍当文件不存在时:is_file 比 file_exists慢总之一句话:file ...

  4. 使用oracle导出的dmp文件(包含表结构还是表数据?)

    我们都知道oracle提供了一个exp程序,可以导出dmp文件,那么dmp文件中到底包含哪些东西呢? 1:有对象的信息吗?比如对象的权限? 2:有表空间信息吗? 3:有表结构吗? 4:有表的索引和触发 ...

  5. API网关Kong系列(二)部署

    部署环境: [OS] centos 6.8(如果是centos6.5,请自行先升级到6.8,否则不支持docker) [Docker] Client version: 1.7.1 Client API ...

  6. 第3章 文件I/O(2)_文件I/O系统调用及文件描述符

    2. 文件I/O系统调用及文件描述符 2.1 文件I/O系统调用 (1)主要函数 函数 功能 函数 功能 open() 打开文件 read() 读取文件 creat() 创建文件 write() 写入 ...

  7. 【C++11新特性】 - 空间配置allocator类

    原文链接: http://blog.csdn.net/Xiejingfa/article/details/50955295 今天我们来讲讲C++的allocator类. C++提供了new和delet ...

  8. MAN 手册各章节功能介绍及快捷键键位整理

    前言   Man 手册页(Manua pages ,缩写man page) 是在linux操作系统在线软件文档的一种普遍形式.内容包括计算机程序库和系统调用等命令的帮助手册. 手册页是用troff排版 ...

  9. 使用 xhprof 进行性能分析

        xhprof 是 facebook 开发的一个PHP扩展,作用来是用来做性能剖析.其官网:http://pecl.php.net/package/xhprof   [安装] 1,下载最新的 t ...

  10. java基础:关于java流与文件操作

    1.描述:流是字节数据或字符数据序列.Java采用输入流对象和输出流对象来支持程序对数据的输入和输出.输入流对象提供了数据从源点流向程序的管道,程序可以从输入流对象读取数据:输出流对象提供了数据从程序 ...