js处理粘贴板内容

e是粘贴事件

var data=e.clipboardData||window.clipboardData;
var len = data.items.length;
var itemType = data.items[0].type;
var kind = data.items[0].kind;

var text = data.getData('text');


1.粘贴的是文字
data.items  长度为1
data.items[0].kind  值为'string'
data.items[0].type  值为'text/plain'
data.getData('text') 值为文字内容
2.粘贴的是截图
data.items  长度为1
data.items[0].kind  值为'file'
data.items[0].type  值为'image/png|*'
data.getData('text') 值为空
3.粘贴的是从文件夹中复制来的文件
data.items  长度为2
data.items[0].kind  值为'string'
data.items[0].type  值为'text/plain'，内容是文件名
data.items[1].kind  值为'file'
data.items[0].type  值为'image/png|*'，奇怪的是试验中任何类型的文件都显示image
data.getData('text') 值为文件名

看一下我们最终的实现：

if (data.items.length==1) {
    var item = data.items[0];
    var itemType = item.type;
    var kind = item.kind;
    // ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1
    if (kind == 'file' && itemType.indexOf('image/')!==-1) {
        console.log('这是截图')
        var blob = item.getAsFile();
        console.log(blob);

        var reader=new FileReader();
        reader.readAsDataURL(blob);

        //文件读取完成时触发
        reader.onload=function(event){
            //获取base64流
            var base64_str=event.target.result;
            //div中的img标签src属性赋值，可以直接展示图片
            $("#imageview").attr("src",base64_str);
            //显示div
            $("#imageview").css("display","block");
            //隐藏输入文字的div
            $("#imageview").next().css("display","none");
        }

    };

}