粘贴上传图片实现

HTML：

<div id="box" style="width:200px;height:200px;border:1px solid;" contenteditable></div>
<script>
    document.querySelector('#box').addEventListener('paste', function(e) {
    // chrome
    if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
        var that = this,
            reader = new FileReader();
            file = e.clipboardData.items[0].getAsFile();

        reader.onload = function(e) {
            var xhr = new XMLHttpRequest(),
                fd = new FormData();

            xhr.open('POST', '../upload.php', true);
            xhr.onload = function () {
                var img = new Image();
                img.src = xhr.responseText;
                that.appendChild(img);  // 这里是把上传后得到的地址插入到#box里
            }

            fd.append('file', this.result); // this.result得到图片的base64
            xhr.send(fd);
        }
        reader.readAsDataURL(file);
    }
}, false);
</script>

PHP：

<?php
    header("Access-Control-Allow-Origin:*");
    $url = 'http://'.$_SERVER['HTTP_HOST'];
    $file = $_POST["file"];
    $data = base64_decode(str_replace('data:image/png;base64,', '', $file));  //截图得到的只能是png格式图片，所以只要处理png就行了
    $name = md5(time()) . '.png';  // 这里把文件名做了md5处理
    file_put_contents($name, $data);
    echo "$url/$name";
?>