近来在做的一个谈天音讯的功用。有个图片上传的功用，能够经由过程按钮上传也能够经由过程Ctrl+V上传。按钮上传的我们能够经由过程七牛的API就能够做了，我们如今来说说Ctrl+V的实现是怎样的。

涉及到的API

• FileReader()

• paste事宜

关于imageFile，用来把文件读入内存，而且读取文件中的数据。供应一个异步的api，运用该api能够在浏览器主线程中异步接见文件体系，读取文件中的数据。我们的功用须要用到FileReader的接口事宜onloadend(读取完成，不管胜利与否)，另有要领readAsDataURL(将文件读取为DataURL)。关于FileReader更多的事宜和要领感兴趣的同砚能够本身去搜刮，这里就不穷究了。

1.构造

我们用的是textarea这个标签，为何不运用div呢，由于是另有@功用，为了兼容两种计划。

<textarea id="app"></textarea>
//猎取id
var textapp = document.getElementById('app');

2.绑定输入框的paste事宜

我们这里的思绪是经由过程检测粘贴的对象范例，如果是图片的话就拿到图片的base64位。而且在图片被读取完成的时刻，我们在去要求背景拿到token。而且在拿到了token后我们就去要求七牛的API。

textapp.addEventListener('paste', function(e){
    for (var i = 0; i < e.clipboardData.items.length; i++) {
        // 检测是不是为图片范例
        if (e.clipboardData.items[i].kind == "file" && /image\//.test(e.clipboardData.items[i].type)) {
            var imageFile = e.clipboardData.items[i].getAsFile();
            var fileReader = new FileReader();
            fileReader.onloadend = function(e) {
                //图片的base64编码
                console.log(e.target.result);
               
                //这里设置猎取token的数据
                var thetoken = '';
                var head = {
                    "cmd": 0x4000C,
                    "uid": parseInt(EXTUID),
                    "ver": 1,
                    "sid": SID,
                    "apptype":1,
                    "entry_type": 2
                    }
                var rdata = {
                    "head":head
                    }
                rdata = JSON.stringify(rdata);
                //猎取背景的给的token
                $.post(request_url_server,rdata,function(data,status){
                    if (status == "success") {
                        if (data['ret'] == 0){
                            var thetoken = data['token'];
                            pubt64(e.target.result.replace('data:image/png;base64,',''), imageFile, thetoken);
                        }
                    }
                });
            };
             //将文件读取为DataUrl
            fileReader.readAsDataURL(imageFile);
            e.preventDefault();
            break;
        }
    }
});

3.上传事宜

当xhr.readyState==4的时刻申明我们胜利的把图片传上七牛了，而且七牛给我们返回了一个json字符串。我们把这个字符串转化成json对象，内里包括有图片的key值，hash值，如今我们就拿到了key把音讯发送给服务端啦。

function pubt64(pic,imageFile,thetoken){
    //图片的base64位
    var pic = pic;
    //imageFile.size为图片流的大小
    var url = "http://upload.qiniu.com/putb64/"+imageFile.size;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState==4){
          // 胜利
          console.log(xhr.responseText);
          //转换成json对象，包括key值，hash值。
          var dataImg = JSON.parse(xhr.responseText);
          //发送给服务端音讯
          sendImg('paste', dataImg);
        }
    }
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization", "UpToken "+thetoken);
    xhr.send(pic);
}