Js实现粘贴上传图片的原理及示例
作者:袁志蒙 发布时间:2024-04-19 10:44:50
我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢?
原理分析:
复制=>粘贴=>上传
在这个操作过程中,我们需要做的就是:监听粘贴事件=>获取剪贴板里的内容=>发请求上传
需要明白的是:
我们只能上传截图工具截的图片(qq截图、微信截图等),不能粘贴上传系统里的图片(从桌面上、硬盘里复制),因为他们是存在完全不同的地方。
知悉paste event这个事件:当进行粘贴(右键paste/ctrl+v)操作时,该动作将触发名为'paste'的剪贴板事件,这个事件的触发是在剪贴板里的数据插入到目标元素之前。如果目标元素(光标所在位置)是可编辑的元素(设置了contenteditable属性的div。textarea并不行),粘贴动作将把剪贴板里的数据,以最合适的格式,插入到目标元素里;如果目标元素不可编辑,则不会插入数据,但依然触发paste event。数据在粘贴的过程中是只读的。
监听了paste事件,也知道了表现形式,接下来就是如何获取数据了:
chrome有特定的方法,利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回调函数里获取到剪贴板里图片的base64编码字符串(无论是截图粘贴的还是网页图片复制粘贴的),ie11,firefox没有这样的api,不过依然有办法可以获取,因为数据已经表现在img的src里了,对于截图粘贴的,直接取img的src属性值(base64),对于网页粘贴的,则把地址传给后台,然后根据地址down下来,存在自己的服务器,最后把新地址返回来交给前端展示就ok了。为了保持一致性便于管理,统一将所有情况(截图、网页)中的img的src属性替换为自己存储的地址。
完整例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js实现粘贴上传图片</title>
<script src="jquery.js"></script>
</head>
<body>
复制粘贴上传图片:
<div id="content_img" contentEditable="true" style="width:500px;height:500px;border:1px solid #000;"></div>
<script>
document.getElementById('content_img').addEventListener('paste', function(e) {
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
var item = e.clipboardData.items[i];
if (item.kind === "string") {
item.getAsString(function(str) {
console.log(str);
alert("请粘贴图片上传");
})
$("#content_img").html("");
} else if (item.kind === "file") {
var blob = item.getAsFile();
console.log(blob);
if (blob.size === 0) {
return;
}
var data = new FormData();
data.append("image", blob);
$.ajax({
url: "http://www.yzmcms.com/upload.php",
type: 'POST',
cache: false,
data: data,
processData: false,
contentType: false,
dataType: "json",
success: function(result) {
console.log(result);
if (result.status) {
var html = "<img src=" + result.data + " width='100' height='100'>";
$("#content_img").append(html);
} else {
console.log(result.message)
}
}
});
//阻止默认行为即不让剪贴板内容在div中显示出来
e.preventDefault();
}
}
});
</script>
</body>
</html>
来源:https://blog.yzmcms.com/js/218.html
猜你喜欢
- 前言schedule是一个第三方轻量级的任务调度模块,可以按照秒,分,小时,日期或者自定义事件执行时间。如果想执行多个任务,也可以添加多个t
- 本文实例讲述了PHP日志LOG类定义与用法。分享给大家供大家参考,具体如下:<?php/*** PHP log 类 */class C
- 视图视图是一个虚拟表(非真实存在),其本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用名称即可获取结果集,并可以将其当作
- subprocess.run()运行并等待args参数指定的指令完成,返回CompletedProcess实例。参数:(*popenargs
- 一、Pyecharts简介和安装1、简介Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的
- 有个excle表格需要做一些过滤然后写入数据库中,但是日期类型的cell取出来是个数字,于是查询了下解决的办法。基本的代码结构data =
- 代码: <?php $page=$_GET['page']; include($page.'php')
- 方法一:现在用 notepad++,在 UTF-8 格式下编写以下语句:#coding=utf-8 print"打印中文字符&qu
- 字符串字符串在Python中是基本数据类型,是一个不可变的字符序列。字符串驻留机制仅保存一份相同且不可变字符串的方法,不同的值被存放在字符串
- 当模型models.py中发生改变时,即在models.py文件操作数据表,使得数据库中的表结构发生变化,需要使用命令,记录这些操作,类似于
- 楔子由于之前电脑上安装的MySQL版本是比较老的了,大概是5.1的版本,不支持JSON字段功能。而最新开发部门开发的的编辑器产品,使用到了J
- ORCLE数据库备份策略 1.通过使用exp和imp命令实现数据库导出和导入。 有三种模式: a. 用户模式: 导出(导入)用户所有对象以及
- 1. 环境准备1.1 安装pillow 和 pytesseractpython模块库需要 pillow 和 pytesseract 这两个库
- 在使用操作XML文件时,我们可以使用Load方法直接加载xml文件即可,在ie和ff下通用。但是是XML字符串,则在两种浏览器下就会有所不同
- 使用python将图片改为灰度图或黑白图有三种方式,分别是是使用cv2库和PIL库来实现,详细过程如下所示。1. 使用cv2库将图片改为灰度
- 凯撒密码的原理:计算并输出偏移量为3的凯撒密码的结果注意:密文是大写字母,在变换加密之前把明文字母都替换为大写字母def casar(mes
- SQL Server数据库动态交叉表的参考示例:--建立测试环境set nocount oncreate table test(model
- 级联查询在ORACLE 数据库中有一种方法可以实现级联查询select * //要查询的字段from table
- 在Python中是没有Switch / Case语句的,很多人认为这种语句不够优雅灵活,在Python中用字典来处理多条件匹配问题字典会更简
- 简 介: 根据文档安装指南 介绍了在本机安装PaddlePaddle的步骤。关键词: PaddlePaddle,pip,安装§01 安装Pa