前端JS 展示上传图片缩略图(本地图片读取)

需求: 点击上传图片按钮,选择图片以后,不请求后端接口,直接将图片展示在缩略图中。

解决方案: 使用 FileReaderFileReader 中的 readAsDataURL 方法。

第一步
input[type=“file”] (上传文件标签) 里面拿到file数据,类似下图
在这里插入图片描述
第二步
拿到file数据后,执行下面代码

// file 是文件数据

// 读取文件
var reader = new FileReader();
// base64位读取
reader.readAsDataURL(file);
reader.onload = function (e) {
  // 给img标签src复制(结果是base64图片)
  img_src = e.target.result;
}

效果展示:

选择前
在这里插入图片描述
选择图片
在这里插入图片描述
选择后
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/46797.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IRIS搭建docker

之前把web实现了docker,开发或测试环境可能需要开发自己搭数据库,为了方便使用,把数据库也做一个docker。 由于原生的CentOS我还有改yum仓库,所以这次从之前lis搞的改好yum的镜像开始(从改好yum的lisnew的镜像创建lis…

SkyWalking链路追踪-搭建-spring-boot-cloud-单机环境 之《10 分钟快速搭建 SkyWalking 服务》

首先了解一下单机环境 第一步,搭建一个 Elasticsearch 服务。第二步,下载 SkyWalking 软件包。第三步,搭建一个 SkyWalking OAP 服务。第四步,启动一个 Spring Boot 应用,并配置 SkyWalking Agent。第五步,…

python_day15_闭包

闭包 def outer(logo):def inner(msg):print(f"<{logo}>{msg}<{logo}>")return innerfunc_1 outer("####") print(type(func_1)) func_1("jsy")func_2 outer("$$$$$") func_2(hello)nonlocal关键字&#xff0c;在闭包中…

element中el-input组件限制输入条件(数字、特殊字符)

1、只能输入纯数字 <el-input v-model"aaa" type"text" input"(v)>(aaav.replace(/[^\d]/g,))" /> 2、只能输入纯数字和小数&#xff08;比如&#xff1a;6.66&#xff09; <el-input v-model"aaa" type"text&quo…

座舱域控进入“上车”加速期,中国芯片的狂飙时代来了?

智能座舱成为了全球芯片厂商竞逐的下一个战场。 进入2023年&#xff0c;联发科官宣与英伟达合作开发集成CPU粒芯的汽车SoC&#xff0c;为下一代软件定义汽车提供全套车载人工智能座舱解决方案&#xff1b;AMD在特斯拉座舱落地后&#xff0c;与亿咖通在智能座舱领域达成了合作&…

Linux 学习记录56(ARM篇)

Linux 学习记录56(ARM篇) 本文目录 Linux 学习记录56(ARM篇)一、总线概念1. 总线2. 串行总线3. 并行总线4. 单工/半双工/全双工5. 同步6. 异步 二、串口(UART)1. 串口配置信息2. 串口通信协议(异步串行全双工总线)3. 框图分析4. 使能串口5. GPIO的复用模式6. RCC时钟7. UART寄存…

面向对象编程:深入理解抽象类和关键字

文章目录 1. 关键字1.1 static1.2 final1.3 static final 2. 抽象类2.1 抽象类的推导过程2.2 抽象类能否创建对象&#xff1f;2.3 抽象类的意义2.4 判断 3. 案例&#xff1a;计算圆形和长方形的周长及面积 在Java编程中&#xff0c;我们经常会遇到一些特殊的关键字和概念&#…

ChatGPT把python 的import和from讲明白了

文章目录 1、import&#xff1a;import关键字用于导入整个模块&#xff0c;您可以使用该模块中的所有对象。语法如下&#xff1a;2、from ... import ...&#xff1a;from ... import ... 语法用于从模块中导入特定的对象&#xff0c;而不是导入整个模块。您可以通过这种方式选…

14、php面向对象3(final、显示调用父类构造方法、static静态变量与方法)

1、如果父类中的方法被声明为 final&#xff0c;则子类无法覆盖该方法。如果一个类被声明为 final&#xff0c;则不能被继承。 <?php class BaseClass{public function test(){echo "BaseClass::test() called".PHP_EOL;}final public function moreTesting(){e…

基于vue+uniapp微信小程序公司企业后勤服务(设备)系统

本系统分为用户和管理员两个角色&#xff0c;其中用户可以注册登陆系统&#xff0c;查看公司公告&#xff0c;查看设备&#xff0c;设备入库&#xff0c;查看通讯录&#xff0c;会议室预约&#xff0c;申请出入&#xff0c;申请请假等功能。管理员可以对员工信息&#xff0c;会…

Makefile常用函数

目录 字符串替换函数&#xff1a;subst 模式字符串替换函数&#xff1a;patsubst 去空格函数 strip 查找字符串函数 findstring 过滤函数 filter 反过滤函数 filter-out 排序函数 sort 取目录函数 dir 取文件函数 notdir 取后缀函数 suffix 取前缀函数 basename 加…

elementUI this.$confirm 文字大小样式

dangerouslyUseHTMLString:true // message部分 以html片段处理 customClass //MessageBox 的自定义类名 整个comfirm框自定义类名 cancelButtonClass // 取消按钮的自定义类名 confirmButtonClass // 确定按钮的自定义类名<style> .addcomfirm{width: 500px; } .a…

selenium的java方式打开IE浏览器

1.下载软件Selenium Driver 官方下载地址&#xff1a; ​ https://www.selenium.dev/downloads/解压selenium-java-3.141.59.zip文件到java项目 seleniumDemo&#xff0c;并降解压的文件放入依赖中&#xff08;1&#xff09;双击项目的src打开项目结构&#xff0c;或右键-打开…

易班开放应用授权重定向,出现跨域的解决方案

问题描述 今天开发H5网站需要接入易班&#xff0c;经过易班授权然后重定向&#xff08;code: 302&#xff09;&#xff0c;使用axios发请求&#xff0c;但是前后端均配置跨域的情况下&#xff0c;不管怎么弄都是一直跨域 但是我们看network&#xff0c;network中对应请求的res…

外贸行业企业邮箱选择:安全好用的邮箱服务

随着全球化的发展&#xff0c;外贸行业在全球经济中越来越重要。作为一家从事对外贸易的企业&#xff0c;可靠、安全、易用的邮箱系统对于成功的国际交易至关重要。为您的企业选择正确的邮箱解决方案可能是一个挑战。为了使选择过程更加简化&#xff0c;我们在这里提供了一些提…

子类化QThread来实现多线程,moveToThread函数的作用

子类化QThread来实现多线程&#xff0c; QThread只有run函数是在新线程里的&#xff0c;其他所有函数都在QThread生成的线程里。正确启动线程的方法是调用QThread::start()来启动。 一、步骤 子类化 QThread&#xff1b;重写run&#xff0c;将耗时的事件放到此函数执行&#…

【UE5 多人联机教程】03-创建游戏

效果 步骤 打开“UMG_MainMenu”&#xff0c;增加创建房间按钮的点击事件 添加如下节点 其中&#xff0c;“FUNL Fast Create Widget”是插件自带的函数节点&#xff0c;内容如下&#xff1a; “创建会话”节点指游戏成功创建一个会话后&#xff0c;游戏的其他实例即可发现&am…

NineData支持最受欢迎数据库PostgreSQL

根据在 Stack Overflow 发布的 2023 开发者调研报告中显示&#xff0c;PostgreSQL 以 45% vs 41% 的受欢迎比率战胜 MySQL&#xff0c;成为新的最受欢迎的数据库。NineData 也在近期支持了 PostgreSQL&#xff0c;用户可以在 NineData 平台上进行创建数据库/Schema、管理用户与…

gensim conherence model C_V 值与其他指标负相关BUG

在我用gensim3.8.3 conherence model分析京东评论主题模型时&#xff0c; C_V 与npmi、u_mass出现了强烈的皮尔逊负相关&#xff1a; 这些地方也反映了类似问题&#xff1a; https://github.com/dice-group/Palmetto/issues/12 https://github.com/dice-group/Palmetto/issue…

手把手教你写代码——基于控制台的学生信息管理系统(单表)

栏目介绍 本栏目专为入门java学习者设计的一些简单的入门项目&#xff0c;另有视频一步一步从零到完整代码的开发过程&#xff0c;让你从头到尾明白整个系统的实现过程&#xff0c;当你完整看完视频之后&#xff0c;完全可以自己不看教程的情况下写出一套属于你自己的代码&…