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
0
投稿猜你喜欢
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
RedHat 9.0下用rpm包安装mysql
Python函数之zip函数的介绍与实际应用
使用Python进行数独求解详解(一)
2021年的Python 时间轴和即将推出的功能详解
mysql中的general_log(查询日志)开启和关闭
[译]Javascript风格要素（二）
分析用Python脚本关闭文件操作的机制
MySQL为例讲解JDBC数据库连接步骤
判断触发器正在处理的是插入，删除还是更新触发
5招带你轻松优化MySQL count(*)查询性能
对Python中画图时候的线类型详解
解决python -m pip install --upgrade pip 升级不成功问题
Python中关于面向对象私有属性方法的详细讲解
Python中不同进制互相转换（二进制、八进制、十进制和十六进制）
基于Vue3实现印章徽章组件的示例代码
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
Python math库 ln(x)运算的实现及原理
css中absolute与relative的区别
