js+php实现粘贴板图片粘贴上传功能
h5的可以检测剪贴板的文件类型，进而将文件类型保存为二进制数据传输到后端进行上传
今天要实现的就是一个简单的编辑器图片复制粘贴上传图片效果
原理很简单，就是监听paste事件，获取clipboardData数据，进行类型判断，然后上传处理
js端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
<script type="text/javascript">
bready(function() {
document.addEventListener('paste', function(event) {
console.log(event)
var isChrome = false;
if (event.clipboardData || event.originalEvent) {
//not for ie11 某些chrome版本使用的是event.originalEvent
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if (clipboardData.items) {
// for chrome
var items = clipboardData.items,
len = items.length,
blob = null;
isChrome = true;
event.preventDefault();
//在items里找粘贴的image,据上面分析,需要循环
for (var i = 0; i < len; i++) {
if (items[i].type.indexOf("image") !== -1) {
blob = items[i].getAsFile();
}
}
if (blob !== null) {
// var file = new File([blob], "dd.txt");
//document.getElementById("test").files[0] = file;
var reader = new FileReader();
reader.onload = function (event) {
// event.target.result 即为图片的Base64编码字符串
var base64_str = event.target.result;
$("#editor").append("<img src='"+base64_str+"' />");
uploadImgFromPaste(base64_str, 'paste', isChrome);
//可以在这里写上传逻辑
//直接将base64编码的字符串上传（可以尝试传入blob对象，看看后台程序能否解析）
...点击查看剩余70%
{{collectdata}}
网友评论0