• 上传从剪贴板复制的图片


    <?php
    if ($_FILES){
        print_r($_FILES);
        exit();
    }
    //print_r($_FILES['Filedata']['tmp_name']);
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <title>test chrome paste image</title>
    <style>
        DIV#editable {
             400px;
            height: 300px;
            border: 1px dashed blue;
        }
    </style>
    </head>
    <body >
        <h2>test image paste in browser</h2>
        <div id="non-editable" >
            <p>copy the following img, then paste it into the area below</p>
            <img src="http://imgstore03.cdn.sogou.com/app/a/100520021/7c5f0dec37dbbce6bee70352b1ccc0f1" />
        </div>
        <div id="editable" contenteditable="true" >
            <p>this is an editable div area</p>
            <p>paste the image into here.</p>
        </div>
    </body>
    <script type="text/javascript">
    
    (function() {
        function paste_img(e) {
            if ( e.clipboardData.items ) {
            // google-chrome
                alert('support clipboardData.items(chrome ...)');
                ele = e.clipboardData.items
                for (var i = 0; i < ele.length; ++i) {
                    if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
                        var blob = ele[i].getAsFile();
                        window.URL = window.URL || window.webkitURL;
    var blob = ele[i].getAsFile();
                        window.URL = window.URL || window.webkitURL;
                        var blobUrl = window.URL.createObjectURL(blob);
    
                        var new_img= document.createElement('img');
                        new_img.setAttribute('src', blobUrl);
                        var new_img_intro = document.createElement('p');
                        new_img_intro.innerHTML = 'the pasted img url(open it in new tab): <br /><a target="_blank" href="' + blobUrl + '">' + blobUrl + '</a>';
    
                        document.getElementById('editable').appendChild(new_img);
                        document.getElementById('editable').appendChild(new_img_intro);
    
    
                        uploadImg(ele[i].getAsFile())
                    }
    
                }
            } else {
                alert('non-chrome');
                window.setTimeout(function(){
                    var imgs = document.getElementById('editable').getElementsByTagName('img')
                    for (var i = 0,j = imgs.length ; i<j ; i++){
                        var img = imgs[i]
                        var blob = dataURItoBlob(img.getAttribute('src'))
                        console.log(blob)
                        uploadImg(blob)
                        }
                }, 0 )
            }
        }
        document.getElementById('editable').onpaste = paste_img
    })()
    function uploadImg(blob){
            var form = new FormData
            form.append('paste_img' , blob)
            var xhr = new XMLHttpRequest()
            xhr.open('POST', '')
            xhr.send(form)
    
    }
    
    
    function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
    }
    </script>
    </html>
  • 相关阅读:
    A Summaryof JDBC
    Chinese Messy Code of String
    Use Spring @Scheduled To Achieve Timing Task
    关于拦截器实现日志存储到db的代码调试
    Java Web指导方向
    错误The request sent by the client was syntactically incorrect ()的解决
    jdbc实现简单的增删改查
    连接oracle jdbc
    关键路径求解算法
    <form> 标签的entype属性
  • 原文地址:https://www.cnblogs.com/vaal-water/p/3614501.html
Copyright © 2020-2023  润新知