前端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;
}

效果展示:

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库管理-第九十四期 19c OCM之路-第四堂(02)(20230725)

第九十四期 19c OCM之路-第四堂(02)(20230725) 第四堂继续! 考点3:SQL statement tuning SQL语句调优 收集Schema统计信息 exec dbms_stats.gather_schems_stats(HR);开启制定表索引监控 create index…

C语言每日一题:6.移除元素+合并两个有序数组。

第一题:移除元素 思路一: 一:暴力查找的方法: 1.找到对应val值的下标,返回数组的下标。 2.删除对应的下标,从前向后用后面覆盖前面。当后一个是数组最后一个数值是就赋值结束了(注意数组越界的问…

width: calc(~“100% - 267px“);动态css 调样式

.result-filtering {color: #8b8b8b;display: flex;// width: 82.6%;width: calc(~"100% - 267px");}

5.python设计模式【单例模式】

内容:保证一个类只有一个实例,并提供一个访问它的全局访问点角色: 单例(Singleton) UML图 举个例子: 需求:一个类只能实例化一个对象,不能实例化多个对象 from abc import abstract…

RocketMQ教程-(5)-功能特性-事务消息

事务消息为 Apache RocketMQ 中的高级特性消息,本文为您介绍事务消息的应用场景、功能原理、使用限制、使用方法和使用建议。 事务消息为 Apache RocketMQ 中的高级特性消息,本文为您介绍事务消息的应用场景、功能原理、使用限制、使用方法和使用建议。…

数据库触发器简介——修改数据的触发器、删除数据的触发器

1.修改数据的触发器 修改数据的触发器 create trigger tb_user_update_triggerafter update on tb_user for each row begininsert int user_logs(id,operation,operate_time,operate_id,operate_params)VALUES(null,update,now(),new.id,concat(更新之前的数据:i…

如何设置Axure中文版 Mac系统下axurerp10怎么设置成中文

有许多小伙伴肯定想知道axure rp 10怎么转换为中文版,接下来就为大家带来最详细的汉化教程,大家可以根据教程一步一步操作,保证可以汉化成功! 准备工作 安装好axurerp10 axurerp10汉化包 百度网盘链接: 百度网盘 请输入提取码 …

PostgreSQL实战-数据库迁移部署

PostgreSQL实战-数据库迁移部署 介绍 根据项目需求,我们需要将现有的PostgreSQL数据库重新部署到新的服务器上。由于项目本身就是基于PostgreSQL数据库构建的,因此数据库迁移将变得十分便捷。接下来,我将简要介绍我们的迁移步骤。 迁移步骤…

2.1 色彩空间

色彩发送器 色彩认知:光源是出生点,光源发射出光线,光线通过直射反射折射等路径最终进入人眼。但是人眼接收到光线后,人眼的细胞产生了一系列化学反应。由此把产生的新号传入大脑,最终大脑对颜色产生了认知感知。 光的…

第一百一十六天学习记录:C++提高:STL-string(黑马教学视频)

string基本概念 string是C风格的字符串,而string本质上是一个类 string和char区别 1、char是一个指针 2、string是一个类,类内部封装了char*,管理这个字符串,是一个char型的容器。 特点: string类内部封装了很多成员方…

PostMan+Jmeter工具介绍及安装

目录 一、PostMan介绍​编辑 二、下载安装 三、Postman与Jmeter的区别 一、开发语言区别: 二、使用范围区别: 三、使用区别: 四、Jmeter安装 附一个详细的Jmeter按照新手使用教程,感谢作者,亲测有效。 五、Jme…

【数据结构】树状数组和线段树

树状数组和线段树 下文为自己的题解总结,参考其他题解写成,取其精华,做以笔记,如有描述不清楚或者错误麻烦指正,不胜感激,不喜勿喷! 树状数组 需求: 能够快速计算区间和保证在修改…

fastadmin采坑之接口分页处理

其实不算fastadmin的代码而是thinkphp自带的分页代码 paginate函数就是自带的分页函数,开始我以为这个只能用于渲染模板不能用于接口,后面看到源代码发现请求参数带page就可以 /*** ApiTitle (获取协会会员)* ApiSummary (获取协会会员)* ApiMethod …

excel 生成sql技巧

"update 表名 set 字段名"&A2&" where 字段名"&B2&";"

【C语言进阶】程序环境和预处理

🔥博客主页:小王又困了 📚系列专栏:C语言 🌟人之为学,不日近则日退 ❤️感谢大家点赞👍收藏⭐评论✍️ 目录 一、程序的翻译环境和执行环境 二、详解编译和链接 2.1翻译环境 2.2编译的过…

现代控制理论

B站学习视频https://space.bilibili.com/230105574/channel/seriesdetail?sid1569601 一.引入状态-空间表达 (本质上是使用一组向量的线性组合来表示整个系统任意物理量,也就是一个特征分解的过程) 现代控制理论的基础是 状态-空间表达方…

Emacs之实现跨程序选中自动复制功能(一百一十八)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

贪心算法重点内容

贪心算法重点内容 4.1部分背包 按照单位重量的价值排序 4.2最小生成树 两种算法 4.3单源最短路径 4.4哈夫曼树

自守数 C语言实现

自守数 描述 自守数是指一个数的平方的尾数等于该数自身的自然数。例如:25^2 625,76^2 5776,9376^2 87909376。请求出n(包括n)以内的自守数的个数 数据范围: 1≤n≤10000 输入描述: int型整数 输出描述&#xf…

【Leetcode】54.螺旋矩阵

一、题目 1、题目描述 给你一个 m m m 行 n n n 列的矩阵 matrix,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例1: 输入:matrix =