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"> ...
随机推荐
- 从Exchager数据交换到基于trade-off的系统设计
可以使用JDK提供的Exchager类进行同步交换:进行数据交换的双方将互相等待对方,直到双方的数据都准备完毕,才进行交换.Exchager类很少用到,但理解数据交换的时机却十分重要,这是一个基于tr ...
- R语言学习——列表
1.列表 列表是一种泛化的向量,其并没有要求所有元素都是同一类型,其元素甚至可为任意类型. 列表格式自由,为统计的计算结果的返回提供了极便利的方法. 2.列表的创建 可以用list()函数创建列表. ...
- python protobuf序列化repeated运用
下面是proto描述文件的定义 message Person { required string name = 1; required int32 id = 2; optional string em ...
- Spark学习笔记2:RDD编程
通过一个简单的单词计数的例子来开始介绍RDD编程. import org.apache.spark.{SparkConf, SparkContext} object word { def main(a ...
- mvc和mtv
Java中MVC详解以及优缺点总结 概念: MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一 ...
- Flask上下文管理源码分析
上下文管理本质(类似于threading.local): 1.每一个线程都会在Local类中创建一条数据: { "唯一标识":{stark:[ctx,]}, "唯一标识& ...
- python写一个简单的CMS识别
前言: 收集了一点cms路径,打算在写一个.之前已经写了 有需要的可以自己翻我的博客 思路: 网站添加路径判断是否为200,并且无过滤列表中的字符 代码: import requests import ...
- 可视化库-seaborn-Facetgrid(第五天)
1. sns.Facetgrid 画一个基本的直方图 import numpy as np import pandas as pd from scipy import stats, integrate ...
- Linux SWAP 交换分区配置说明(转)
一.SWAP 说明 1.1 SWAP 概述 当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被 ...
- HibernateTemplate使用注意点
1. findByExample(vo) 可轻松根据vo的内部数据作为参数查找数据,vo中的基本类型不能为null,同时不支持主键查找. 2. get(vo.class, id) 根据主键来查找数据 ...