web前端之复制图片到div中、使用contenteditable属性把元素变为可编辑状态、FileReader

MENU

  • 方式一
  • 方式二
  • contenteditable
  • FileReader


方式一

<div id="idEditor" class="w_100_ h_200" contenteditable></div>

1、存在兼容性问题,而且contenteditable属性只是把div变为可编辑形式而已;
2、只能处理截屏形式的图片;
3、当把电脑上的图片粘贴到容器里面会存在两种情况,
情况一:不能正确显示,显示一张加载失败的图片;
情况二:粘贴没有任何反应,我遇到的就是这种情况。


方式二

方式二是在方式一的基础上进行优化。

document.addEventListener('paste', (e) => {let files = e.clipboardData.files;if (files.length > 0) {// 阻止事件默认行为e.preventDefault();const file = files[0];// 创建文件对象const reader = new FileReader();reader.onload = (event) => {const img = document.createElement('img');img.className = "w_86 h_68";img.src = event.target.result;idEditor.appendChild(img);};reader.readAsDataURL(file);}
});

contenteditable

MDN

全局属性contenteditable是一个枚举属性,表示元素是否可被用户编辑。如果可以,浏览器会修改元素的组件以允许编辑。


FileReader

MDN

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据。


其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。


重要提示:FileReader仅用于以安全的方式从用户(远程)系统读取文件内容,它不能用于从文件系统中按路径名简单地读取文件。要在JavaScript中按路径名读取文件,应使用标准Ajax解决方案进行服务器端文件读取,如果读取跨域,则使用CORS权限。


备注:此特性在Web Worker中可用

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

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

相关文章

ActionCLIP:A New Paradigm for Video Action Recognition

文章目录 ActionCLIP: A New Paradigm for Video Action Recognition动机创新点相关工作方法多模态框架新范式预训练提示微调 实验实验细节消融实验关键代码 总结相关参考 ActionCLIP: A New Paradigm for Video Action Recognition 论文&#xff1a;https://arxiv.org/abs/21…

7-5 时间类(Java for PTA)

设计一个名为Time 的类。这个类包含&#xff1a; 表示时间的数据域hour、minute 和second。一个以当前时间创建Time 对象的无参构造方法&#xff08;数据域的值表示当前时间&#xff09;。一个构造Time 对象的构造方法&#xff0c;这个对象有一个特定的时间值&#xff0c;这个…

服务端主动给客户端发消息?实战教学:使用Nestjs实现服务端推送SSE

前言 服务端消息推送SSE是常用的服务器消息通信手段&#xff0c;适用于服务器主动给客户端发送消息的场景&#xff0c;例如私信通知&#xff0c;扫描登录等都可以使用SSE实现。SSE的底层原理是客户端与服务端建立 HTTP 长链接。 Nestjs 框架内置了对SSE的支持&#xff0c;本文…

【算法】【动规】环绕字符串中唯一的子字符串

跳转汇总链接 &#x1f449;&#x1f517;动态规划算法汇总链接 1.5 环绕字符串中的子字符串 &#x1f517;题目链接 定义字符串 base 为一个 “abcdefghijklmnopqrstuvwxyz” 无限环绕的字符串&#xff0c;所以 base 看起来是这样的&#xff1a; "...zabcdefghijklmnop…

ES6 面试题 | 15.精选 ES6 面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

C++:函数重载

1.函数重载概念 函数重载就是用同一个函数名定义的不同函数&#xff0c;当函数名和不同的参数搭配时函数的功能和含义不同。 2.实现函数重载的条件 同一个作用域&#xff0c;参数个数不同或者参数类型不同或者参数顺序不同(满足一个即可) void func(){} void func(int x){} v…

2024美赛全方位备赛教学/翻译/写作模版/翻译/软件/资料

本文字数20000&#xff0c;文章较长&#xff0c;建议先看目录&#xff0c;点击目录条目可以快速跳转。2024美赛大学生数学建模竞赛即将开始&#xff0c;不知道大家是否已经准备好相关资料如写作模板、常见算法的编程代码等等&#xff1f;评论区处有这些资料的下载方式。 文章结…

计算机网络:数据链路层(广域网、PPP协议、HDLC协议)

今天又学会了一个知识&#xff0c;加油&#xff01; 目录 一、广域网 二、PPP协议 1、PPP协议应满足的要求 2、PPP协议无需满足的要求 3、PPP协议的三个组成部分 4、PPP协议的状态图 5、PPP协议的帧格式 三、HDLC协议 1、HDLC的站&#xff08;主站、从站、复合站&…

定积分的应用@元素法@微元法@平面图形面积

文章目录 abstract微元法(元素法)微元法的步骤 平面图形的面积直角坐标系上图形面积参数方程确定的曲线所围成的图形面积例 极坐标上图形面积&#x1f47a;曲边扇形面积曲扇环面积 应用例例 abstract 微元法定积分的应用平面图形面积体积弧长 微元法(元素法) 定积分(一重,二…

计算机网络:网络层(无分类编址CIDR、计算题讲解)

带你快速通关期末 文章目录 前言一、无分类编址CIDR简介二、构成超网三、最长前缀匹配总结 前言 我们在前面知道了分类地址&#xff0c;但是分类地址又有很多缺陷&#xff1a; B类地址很快将分配完毕!路由表中的项目急剧增长! 一、无分类编址CIDR简介 无分类域间路由选择CI…

【后端学前端】第四天 css动画 垂直轮播效果(css变量、位移缩放动画、动画延迟)

1、学习信息 视频地址&#xff1a;css动画 垂直轮播效果&#xff08;css变量、位移缩放动画、动画延迟&#xff09;_哔哩哔哩_bilibili 2、源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title…

深入理解——快速排序

目录 &#x1f4a1;基本思想 &#x1f4a1;基本框架 &#x1f4a1;分割方法 ⭐Hoare版本 ⭐挖坑法 ⭐前后指针法 &#x1f4a1;优化方法 ⭐三数取中法 ⭐小区间内使用插入排序 &#x1f4a1;非递归实现快速排序 &#x1f4a1;性能分析 &#x1f4a1;基本思想 任取待排…

【代码随想录】算法训练计划51

dp 1、309. 买卖股票的最佳时机含冷冻期 题目&#xff1a; 给定一个整数数组prices&#xff0c;其中第 prices[i] 表示第 i 天的股票价格 。​ 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&…

CSS中控制元素水平布局的七个属性

元素的水平方向的布局 元素在其父元素中水平方向的位置由一下几个属性共同决定 margin-left border-left padding-left width padding-right border-right margin-right 一个元素在其父元素中&#xff0c;水平布局必须要满足以下…

【redis,nosql】redis键值数据库

什么是redis数据库 Redis is an open source, in-memory data structure store used as a database, cache, message broker, and streaming engine. 存储模式 字符串&#xff08;String&#xff09; Redis strings store sequences of bytes, including text, serialize…

webpack的配置与优化

webpack 启动命令配置 在package.json中配置启动命令 除了 npm start 外 运行dev和build都需要加 run 例&#xff1a;npm run build "scripts": {"start": "npm run dev", //启动开发模式 简化命令"dev": "npx webpack serve -…

力扣刷题-二叉树-二叉树左叶子之和

404 左叶子之和 给定二叉树的根节点 root &#xff0c;返回所有左叶子之和。 示例 1&#xff1a; 输入: root [3,9,20,null,null,15,7] 输出: 24 解释: 在这个二叉树中&#xff0c;有两个左叶子&#xff0c;分别是 9 和 15&#xff0c;所以返回 24 思路 迭代法 迭代法理解…

【谭浩强C语言:前八章编程题(多解)】

文章目录 第一章1. 求两个整数之和(p7) 第二章2. 求三个数中的较大值&#xff08;用函数&#xff09;(p14、p107)3.求123...n(求n的阶乘&#xff0c;用for循环与while循环)(P17)1.循环求n的阶乘2.递归求n的阶乘(n< 10) 4.有M个学生&#xff0c;输出成绩在80分以上的学生的学…

C++11——可变参数模板

可变参数模板可以接收不定数量的参数&#xff0c;比如printf函数就是这样&#xff0c;可以传任意数量的参数 template<class ...Args> void test(Args... args) {//... } Args是一个函数模板参数包&#xff0c;args函数形参参数包 如何获取参数包的值 1.递归获取 void…

【算法】【动规】摆动序列

跳转汇总链接 &#x1f449;&#x1f517;动态规划算法汇总链接 2.2 摆动序列 &#x1f517;题目链接 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;如果存在的话&#xff09;可能是正数或负数。仅有一个元素或…