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"> ...
随机推荐
- 1011 World Cup Betting (20 分)
1011 World Cup Betting (20 分) With the 2010 FIFA World Cup running, football fans the world over wer ...
- centos svn 的搭建
一. SVN 简介 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库(repository) 中. ...
- vs2013错误解决方法
1.cannot determine the location of the vs common tools folder 打开"VS2013开发人员命令提示后",上面提示&quo ...
- JAVA中关于set()和get()方法的理解及使用
对于JAVA初学者来说,set和get这两个方法似乎已经很熟悉了,这两个方法是JAVA变成中的基本用法,也是出现频率相当高的两个方法. 为了让JAVA初学者能更好的理解这两个方法的使用和意义,今天笔者 ...
- 在visual code的debugger for chrome中调试webpack构建的项目
一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使 ...
- Java集合类性能分析
[转]对于Android开发者来说深入了解Java的集合类很有必要主要是从Collection和Map接口衍生出来的,目前主要提供了List.Set和Map这三大类的集合,今天Android吧(ard ...
- node多进程
内容: 1.多进程与多线程 2.node中多进程相关模块的使用 1.多进程与多线程 多线程:性能高:复杂.考验程序员 多进程:性能略低:简单.对程序员要求低 Node.js中默认:单进程.单线程,但是 ...
- 收集的一些python基础教学博客
=======python3学习链接======= Python 3 教程:http://www.runoob.com/python3/python3-tutorial.html 深入python3: ...
- django项目环境设置
1.连接数据库,如mysql DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'django_comi ...
- (3/24)轻松配置 webpack3.x入口、出口配置项
在上一节中我们只是简单的尝了一下webpack的鲜,对其有了基本的了解,对于上一节当中的打包方式,在实际开发中并不使用,而是通过webpack的配置文件的方式进行设置的,所以该节就在上一节的基础上学一 ...