js实现图片粘贴上传到服务器并展示的实例

 document.addEventListener('paste', function (event) { console.log(event) var isChrome = false; if ( event.clipboardData || event.originalEvent ) { //not for ie11 某些chrome版本使用的是event.originalEvent var clipboardData = (event.clipboardData || event.originalEvent.clipboardData); if ( clipboardData.items ) { // for chrome var items = clipboardData.items, len = items.length, blob = null; isChrome = true; //items.length比较有意思，初步判断是根据mime类型来的，即有几种mime类型，长度就是几（待验证） //如果粘贴纯文本，那么len=1，如果粘贴网页图片，len=2, items[0].type = 'text/plain', items[1].type = 'image/*' //如果使用截图工具粘贴图片，len=1, items[0].type = 'image/png' //如果粘贴纯文本+HTML，len=2, items[0].type = 'text/plain', items[1].type = 'text/html' // console.log('len:' + len); // console.log(items[0]); // console.log(items[1]); // console.log( 'items[0] kind:', items[0].kind ); // console.log( 'items[0] MIME type:', items[0].type ); // console.log( 'items[1] kind:', items[1].kind ); // console.log( 'items[1] MIME type:', items[1].type ); //阻止默认行为即不让剪贴板内容在div中显示出来 event.preventDefault(); //在items里找粘贴的image,据上面分析,需要循环 for (var i = 0; i 

 // 处理粘贴事件 $("#aaa").on('paste', function(eventObj) { // 处理粘贴事件 var event = eventObj.originalEvent; var imageRe = new RegExp(/image\/.*/); var fileList = $.map(event.clipboardData.items, function (o) { if(!imageRe.test(o.type)){ return } var blob = o.getAsFile(); return blob; }); if(fileList.length <= 0){ return } upload(fileList); //阻止默认行为即不让剪贴板内容在div中显示出来 event.preventDefault(); }); function upload(fileList) { for(var i = 0, l = fileList.length; i 

 { // errno 即错误代码，0 表示没有错误。 //  如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理 errno: 0, // data 是一个数组，返回若干图片的线上地址 data: [ '图片1地址', '图片2地址', '……' ] }