在写聊天功能时,需要实现剪切板粘贴上传图片并返回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;