剪贴板粘贴图片自动上传服务器和又拍云

剪贴板粘贴图片自动上传服务器和又拍云

关键字：clipboard paste imageschrome支持剪贴板事件，因此，利用这个事件，完成剪贴板图片直接粘贴，并自动上传服务器功能。

另外就是对于最新版firefox，可以直接粘贴，不用任何处理。原理是按照base64编码，直接将图片数据存入img标签的src中。

是方便了编辑，但是在其他不支持base64为src的浏览器，比如低版本IE，就无法展示图片了。

所以为了兼容性，还是将图片上传到web服务器的好。

网上能支持图文混排的word文档粘贴的，都需要安装activeX控件，而且收费还比较贵。

在时间、金钱、需求之间取个平衡了～下面是修改步骤：

admin/editor/kindeditor.js 末尾加上：

$(document).ready(function(){

var KE =editorMap['content'];

if(KE){

if(KE.isEmpty()){

KE.insertHtml('Chrome下可直接粘贴图片,并自动上传服务器,欢迎体验~');

}

KE.edit.doc.onpaste = function(event){

// console.log('content bind onpaste.');

// use event.originalEvent.clipboard for newer chrome versions

var items = (event.clipboardData || event.originalEvent.clipboardData).items;

console.log(JSON.stringify(items)); // will give you the mime types

// find pasted image among pasted items

var blob;

for (var i = 0; i < items.length; i++) {

if (items[i].type.indexOf("image") === 0) {

blob = items[i].getAsFile();

}

}

// load image if there is a pasted image

// console.log(blob);

if (blob !== null && blob != undefined) {

// submitFileForm(blob, 'paste');

submitFileFormToUpyun(blob, 'paste');

}

}

}

});

function submitFileFormToUpyun(file_blob, type) { var extension =

file_blob.type.match(/\/([a-z0-9]+)/i)[1].toLowerCase();

// console.log('filetype:'+file_blob.type);

var formData = new FormData();

formData.append('file', file_blob, "paste."+extension);

formData.append('extension', extension );

formData.append("mimetype", file_blob.type );

formData.append('submission-type', type);

var xhr = new XMLHttpRequest();

// xhr.responseType = "blob";//返回的是普通数据,不是图片,因此不需要以二进制显示

xhr.open('POST', '/paste_upload/upyun_do.php');

xhr.onload = function () {

if (xhr.status == 200) {

try

{

var obj = jQuery.parseJSON( xhr.responseText);

if(obj && parseInt(obj.error) == 0){

console.log(obj);

var url = obj.url;

if(url.toString().indexOf("/paste_img/")>=0){

//

document.getElementById("pastedImage").src = url;

//addattach_img(fileurl,imgsrc,aid, width, height, alt)

addattach_img(url, url,8, obj.width, obj.height, obj.filename);

}

} //end obj

}

catch(err)

{

alert('paste return error!');

}

}//end xhr status

};

xhr.send(formData);

}

服务器响应php：/paste_upload/upyun_do.php

这里就不写全部的代码了。步骤就是：1.先利用自带的uploadFile，完成上传到emlog默认目录。