相信大家在一些网站上看到通过QQ截图，然后粘贴图片就可以在网站实现预览该截图的功能，这么便捷的操作是不是非常利于用户的体验呢。

    下面通过JQUERY进行实现这一个功能，并且实现上传该图片到后端服务器。主要利用的是HTML5的clipboardData及FileReader，目前支持chrome及safari浏览器。

1、粘贴事件绑定

首先进行绑定paste事件，触发paste事件时获取到剪贴板的内容

然后对内容进行过滤出文件为图片类型的内容，通过FileReader生成dataurl文件资源，将该资源传递给IMG标签的src即可进行预览.

如需要对图片进行裁剪功能可以使用一个JQUERY插件(jcrop):

$("body").on('paste',pastepic);var pastepic=function(event){	if (event.originalEvent) {	    event = event.originalEvent;	}	var clipboardData = event.clipboardData;	if (clipboardData && clipboardData.items) {		item = clipboardData.items[0];		types = clipboardData.types || [];                for (var i = 0; i < types.length; i++) {			if (types[i] === 'Files') {    			    item = clipboardData.items[i];				break;			}		}		if (item && item.kind === 'file' && item.type.match(/^p_w_picpath\//i)) {			var blob = item.getAsFile(), reader = new FileReader();			reader.onload = function(e) {				var imgStr = e.target.result;				if (imgStr.indexOf('base64,') != -1) {					showpic(imgStr);				}			};			reader.readAsDataURL(blob);			}else{				alert('该粘贴内容非图片格式~');			}		}else{			alert('没有发现粘贴内容~');		}	}

2、上传到后端服务器

简单的AJAX异步过程调用，只是获取图片值的时候只需要获取图片的src即可

var data={}data['pic']=$('#picture').attr('src');$.ajax({	'url':"upload.php",	'data':data,	'type':'post',	'dataType':'json',	'success':function(data){		alert(data.msg);	},	'error':function(data){	    alert('上传失败')	},	'complete':function(data){		$('#uploadimg').val('上传完成');	}})

3、后端服务器处理

通过传递过来的图片src可以获取到data-type（即图片类型），在"base64,"之后为图片的内容，该内容已经经过base64编码，因此需要进行转码后进行保存到服务器。

     getMessage();}$data = array('success' => $success, 'msg' => $msg);echo json_encode($data);?>