QQ邮箱直接复制粘贴上传图片的原理是什么？

Question

在qq邮件中，写邮件的时候，可以直接把从外面复制的图片直接粘贴在邮件里面，图片就完成了上传，这是什么原理？

Answer 1

html
<div id="box" style="width:200px;height:200px;border:1px solid;" contenteditable></div>

javascript

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

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";
?>

Answer 2

js事件触发，然后在事件触发的函数里异步上传而已。