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