效果图:
这是在页面输入ctrl + v 后的弹窗
第一步:为 document 注册一个全局监听器,监听 ctrl + v事件。
document.addEventListener('paste', function (event) {
var pasteItems = event.clipboardData && event.clipboardData.items;
if (pasteItems && pasteItems.length) {
// 检索剪切板items;pasteItem为获取到的图片
for (var i = 0; i < pasteItems.length; i++) {
if (pasteItems[i].type.indexOf('image') !== -1) {
qaSystem.pasteImagefile = pasteItems[i].getAsFile();
break;
}
}
}
// 此时file就是我们的剪切板中的图片对象
// 如果需要预览,可以执行下面代码
var reader = new FileReader()
reader.onload = function(event) {
preview.innerHTML = '<img src="' + event.target.result + '" style="width:500px;" >';
}
reader.readAsDataURL(qaSystem.pasteImagefile);
//打开对话框
$("#sendPostImageDialog").dialog("open");
});
第二步:在页面声明显示预览图片的div
<div id="sendPostImageDialog">
<div id="showImg"></div> <!--用来显示预览图片-->
</div>
第三步:注册jQuery ui的dialog组件,并添加事件
$( "#sendPostImageDialog" ).dialog({
autoOpen: false,
modal: true,
width:'auto',
buttons : {
"上传" : function() {
qaSystem.sendPasteImage();
},
"取消" : function() {
$(this).dialog("close");
}
}
});//发送图片确认