【jQuery脱坑指南】监听 ctrl + v键，弹窗确认上传

效果图:

这是在页面输入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");
            }
        }
     });//发送图片确认