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对象,看看后台程序能否解析) } reader.readAsDataURL(blob); } } else { //for firefox setTimeout(function () { //设置setTimeout的原因是为了保证图片先插入到div里,然后去获取值 var imgList = document.querySelectorAll('#editor img'), len = imgList.length, src_str = '', i; for (i = 0; i < len; i ++) { if (imgList[i].className !== 'my_img') { //如果是截图那么src_str就是base64 如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址 src_str = imgList[i].src; } } uploadImgFromPaste(src_str, 'paste', isChrome); }, 1); } } else { //for ie11 setTimeout(function () { var imgList = document.querySelectorAll('#editor img'), len = imgList.length, src_str = '', i; for (i = 0; i < len; i ++) { if (imgList[i].className !== 'my_img') { src_str = imgList[i].src; } } uploadImgFromPaste(src_str, 'paste', isChrome); }, 1); } }); }); function uploadImgFromPaste (file, type, isChrome) { var formData = new FormData(); formData.append('filedata', file); formData.append('submission-type', type); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload_image.php'); xhr.onload = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText), tarBox = document.getElementById('tar_box'); if (isChrome) { var img = document.createElement('img'); img.className = 'my_img'; img.src = data.store_path; tarBox.appendChild(img); } else { var imgList = document.querySelectorAll('#tar_box img'), len = imgList.length, i; for (i = 0; i < len; i ++) { if (imgList[i].className !== 'my_img') { imgList[i].className = 'my_img'; imgList[i].src = data.store_path; } } } } else { console.log(xhr.statusText); } }; }; xhr.onerror = function (e) { console.log(xhr.statusText); } xhr.send(formData); } </script> </head> <body> <div id="editor" contenteditable style="width:100%;height:400px;border:1px solid grey;"> 赋值图片或截图然后在此粘贴 </div> </body> </html>
php端代码
<?php $_imgdata = $_POST['filedata']; $upExt = "jpg,jpeg,gif,png,pjpeg"; $reExt = '(' . str_replace (',', '|', $upExt) . ')'; if (substr ($_imgdata, 0, 10) == 'data:image') { // base64编码的图片,可能出现在firefox粘贴,或者某些网站上,例如google图片 if (preg_match ('/^data:image\/' . $reExt . '/i', $_imgdata, $sExt)) { $sExt = $sExt [1]; // 得到图片后缀名称 $imgContent = base64_decode (substr ($_imgdata, strpos ($_imgdata, 'base64,') + 7)); $file_name = uniqid () . "." . $sExt; // 图片名称 file_put_contents ($file_name, $imgContent); // echo $_limitsize;exit(); } } ?>
网友评论0