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. google浏览器清除缓存

    google浏览器设置不缓存的方法 摘要:我们在做web开发的时候特别是在调试js时,会经常使用的google浏览器,这个时候就要我们修改过的代码可能不能生效.这是因为我们的浏览器默认是有缓存的,但是 ...

  2. linux下一个启动和监测多个进程的shell脚本程序

    #!/bin/sh# Author:tang# Date:2017-09-01 ProcessName=webcrawlerInstanceCount=6RuntimeLog='runtime.log ...

  3. Install hadoop on windows(non-virtual machine, such cygwin)

    DownloadBefore starting make sure you have this two softwares Hadoop 2.7.1 Java – Jdk 1.7+ Extract d ...

  4. 【Python编程:从入门到实践】chapter2 变量和简单数据类型

    2.1 运行2.2 变量 message = "hello" print(message) 2.2.1 变量的命名和使用 2.2.2 使用变量是避免命名错误2.3 字符串 “Hel ...

  5. 深度学习、图像识别入门,从VGG16卷积神经网络开始

    刚开始接触深度学习.卷积神经网络的时候非常懵逼,不知道从何入手,我觉得应该有一个进阶的过程,也就是说,理应有一些基本概念作为奠基石,让你有底气去完全理解一个庞大的卷积神经网络: 本文思路: 一.我认为 ...

  6. Visual Studio自动添加头部注释

    VS2013 自动添加头部注释 1.找到VS2013的安装目录 下文以安装目录 C:\Program Files (x86)\Microsoft Visual Studio 12.0 为例 2.修改C ...

  7. tornado-模板,转义,上传静态文件

    class MainHandler(tornado.web.RequestHandler): def get(self): self.render("ces.html") def ...

  8. spring_cxf_basic_sender

    jar applicationContent.xml <?xml version="1.0" encoding="UTF-8"?> <bean ...

  9. 15.Result配置详解

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 说明:在前面的许多案例中我们所用到的Action基本都继承自ActionSu ...

  10. java ee7 配置文件

    java ee7 配置文件 1. 项目目录 # ee pom.xml      Maven构建文件 /src/main/java      Java源文件 /src/main/resource     ...