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"> ...
随机推荐
- HttpUrlConnection使用详解--转
http://blog.csdn.net/fightingXia/article/details/71775516 一,HttpURLconnection的介绍 在Android开发中网络请求是最常用 ...
- PAT 乙级 1038 统计同成绩的学生C++版
1038. 统计同成绩学生(20) 时间限制 250 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 本题要求读入N名学生的成绩,将 ...
- Java设计原则之依赖倒转原则
定义:高层模块不应该依赖低层模块,二者都应该依赖其抽象:抽象不应该依赖细节:细节应该依赖抽象. 问题由来:类A直接依赖类B,假如要将类A改为依赖类C,则必须通过修改类A的代码来达成.这种场景下,类A一 ...
- java study文件读写
文件读写 如果在代码中写入大量的数据,会增加代码的冗余度,通过读取文件的方式,可以精简代码,便于数据的修改和代码的维护 IO流的分类:字节流和字符流 字符流 字符输出流:写文本文件的,抽象基类java ...
- 关于UC、火狐、谷歌浏览器屏蔽布局中广告的解决办法
关于UC浏览器屏蔽了广西人才网的名企.品牌.热点的logo,是因为当成广告过滤掉了,以后div的class和id不能以“ad”开头.这可能只是其中一个规则,adxxxx是可以的,不能是adXxxx, ...
- 【Unix网络编程】chapter1简介
1.1 概述 1.2一个简单的时间获取客户程序 网际套接字地址结构中IP地址和端口号这两个成员必须使用特定的格式,为此我们调用库函数htons("主机到网络端整数")去转换二进制端 ...
- Django中间件执行流程
中间件函数是 django 框架为我们预留的函数接口, 让我们可以干预请求和应答的过程 1. 获取浏览器端的IP地址: 使用 request.META[‘REMOTE_ADDR’] 2. 使用中间件 ...
- while_else
使用while循环输出100-50,从大到小,到50的时候,再从0到50输出,然后结束count =
- Redis如何存储对象与集合示例详解
前言 大家都知道在项目中,缓存以及mq消息队列可以说是不可或缺的2个重要技术.前者主要是为了减轻数据库压力,大幅度提升性能.后者主要是为了提高用户的体验度,我理解的是再后端做的一个ajax请求(异 ...
- linux操作系统2 linux常用命令
知识内容: 1.目录及文件操作 2.用户.群组与权限 3.重定向.管道 4.磁盘存储管理 5.系统命令 6.其他命令 参考: http://man.linuxde.net/ Linux命令规则:目录名 ...