剪贴板粘贴图片自动上传服务器和又拍云
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
剪贴板粘贴图片自动上传服务器和又拍云
关键字: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默认目录。