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

关键字:clipboard paste images

chrome支持剪贴板事件,因此,利用这个事件,完成剪贴板图片直接粘贴,并自动上传服务器功能。

另外就是对于最新版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默认目录。

2.然后再调用又拍云的upyun.class.php sdk,进行上传动作。

优缺点:

和又拍云form提交方式相比,本方案的缺点是,如果能在博客服务器和又拍云服务器之间进行http明文审计,会审计到用户名和密码。

在便携性和安全性之间选择,那就只有多一个权限低点的操作员了。

1409142207_paste.png

| 0个评论