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"> ...
随机推荐
- 6.后台验证码-session作用域
首先要有生成验证码图片和验证码文字的逻辑 package cn.bingou.util; import java.awt.Color; import java.awt.Font; import jav ...
- Oracle 某字段值相同的取前几条数据
rank() over(partition)的使用(转载) 有的时候会遇到这样的问题,我们需要查询一张表,而且要按照业务排序,比如我需要如下的结果: 地区 日期 费用 产品编号 用 ...
- unity3d中物体的控制
一.物体的循环移动和旋转 思路:通过对时间的计算,每隔一段时间让物体旋转,实现来回移动. float TranslateSpeed = 0.02f; float TranslateSpeedTime ...
- SpringBoot入门篇--Thymeleaf引擎模板的基本使用方法
我们在使用SpringBoot框架的时候在前面已经介绍了Thymelea引擎模板,因为SpringBoot对JSP惨不忍睹的支持.那我们在使用引擎模板对前端页面进行渲染能够返回的情况下我们怎么才能在静 ...
- 外观设计模式 (Facade)
目的:为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使 外观设计模式使用场合: 1. 在设计初期阶段,应该有意识的将不同的两个分层.层与层之间建立外观 ...
- Spring MVC 学习笔记3 - 利用Default Annotation 模式获取请求,使Controller与View对应,并传值。
1. WEB-INF/web.xml 这里定义了获取请求后,执行的第一步.抓取请求. <servlet> <servlet-name>appServlet</servle ...
- centos7.3使用squid搭建代理服务器
centos7.3使用squid搭建代理服务器 1 安装 yum install squid 2 编辑 vi /etc/squid/squid.conf 3 设置 最底部增加 如下http_acces ...
- 手动控制IIS Express的两个常用方法
由于VS在开发WEB应用程序时,每次都需要重新启动IIS Express,速度太慢了,如果改为手动控制IIS Express启动,那么可以直接编译应用程序后,直接刷新页面,那么速度会更快. 因此需要常 ...
- SpringMVC 之@RequestBody 接收Json数组对象
1. 摘要 程序流程: 前台使用ajax技术,传递json字符串到后台: 后台使用Spring MVC注解@RequestBody 接受前台传递的json字符串,并返回新的json字符串到前台: 前台 ...
- python 网页爬虫,下载网络图片
# coding=utf-8 import lxml,bs4,re,requests csvContent='' file = open('D:\\tyc_demo.html','rb') soup ...