实现剪切板粘贴上传图片并返回URl显示图片

在写聊天功能时，需要实现剪切板粘贴上传图片并返回URl显示图片

$('#input-area').bind("paste", function(){
    //获取截图
    var items = (event.clipboardData || window.clipboardData).items;

    var file = null;
    if (items && items.length) {
        // 搜索剪切板items
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
                console.log(items[i]);
                file = items[i].getAsFile();
                break;
            }
        }
    } else {
        //log.innerHTML = '<span style="color:red;">当前浏览器不支持</span>';
        return;
    }
    if (!file) {
        //log.innerHTML = '<span style="color:red;">粘贴内容非图片</span>';
        return;
    }
    // 此时file就是我们的剪切板中的图片对象
    // 如果需要预览，可以执行下面代码
    var reader = new FileReader();
    reader.onload = function(event) {
        console.log(event);
        /*var preview_html = '<img src="' + event.target.result + '" class="upload-image" style="width: 160px">';
        $("#input-area").append(preview_html);*/
    }
    //readAsDataURL 方法用来读Blob或File内容，当读操作完成之后，readyState 状态变成DONE，并触发 loadend 方法。此时，        //result 属性就包含了一个URL字符串，即文件数据的base64编码格式。
    reader.readAsDataURL(file);
    //将之上传到服务器中  之前的转码可以不用写
    var url = "/upLoadFile/uploadMultiFile?_=" + Math.random();
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    formData.append("uploadFile", file);
    xhr.open("POST", url, true);
    xhr.send(formData);
    xhr.onreadystatechange = function () {
        console.log(xhr);
        if (xhr.readyState == 4 && xhr.status == 200) {
            var _data = JSON.parse(xhr.responseText);
            var img = new Image();
            img.src = _data.items[0].url;
            $(img).css('max-width', '160px').attr("class", "EQQ_faceImg");
            $(".input-area").append(img);
            $('div[name=uploadImg]').remove();
        }
    }
    $(".input-area").focus();
});

如果需要框中显示处理之后的数据，屏蔽掉未处理之前粘贴上的数据。需要在处理之后加上return false;