js+php实现粘贴板图片粘贴上传功能

js+php实现粘贴板图片粘贴上传功能

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();
    }
}

?>


{{collectdata}}

网友评论0