上传从剪贴板复制的图片

<?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 {
        width: 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>
posted on 2014-03-20 19:59 雨弓阅读(741) 评论(0) 收藏举报