首页 > 代码库 > chrome及safari浏览器实现直接粘贴图片(纯JS)
chrome及safari浏览器实现直接粘贴图片(纯JS)
相信大家在一些网站上看到通过QQ截图,然后粘贴图片就可以在网站实现预览该截图的功能,这么便捷的操作是不是非常利于用户的体验呢。
下面通过JQUERY进行实现这一个功能,并且实现上传该图片到后端服务器。主要利用的是HTML5的clipboardData及FileReader,目前支持chrome及safari浏览器。
1、粘贴事件绑定
首先进行绑定paste事件,触发paste事件时获取到剪贴板的内容
然后对内容进行过滤出文件为图片类型的内容,通过FileReader生成dataurl文件资源,将该资源传递给IMG标签的src即可进行预览.
如需要对图片进行裁剪功能可以使用一个JQUERY插件(jcrop):http://code.ciaoca.com/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(/^image\//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=http://www.mamicode.com/{}"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编码,因此需要进行转码后进行保存到服务器。
<?php /** * 图片上传后端 * author:lailaiji@163.com * QQ:272388404 **/ $success = false; $msg = ‘‘; try { $directory = ‘upload/‘; //使用相对路径 $filename = ‘‘; //保存的图像文件 $src = $_POST[‘pic‘]; if (strpos($src, ‘http://‘) != 0) throw new Exception(‘没有发现图片URL‘, 206); $filename = uniqid(‘upimg‘) . ‘.jpg‘; $ext_name = ‘jpg‘; $basepos = strpos($src, ‘base64,‘); if ($basepos != -1) { $src = substr($src, $basepos + 7); $src = base64_decode($src); $rs = file_put_contents($directory . $filename, $src); } else { $rs = file_put_contents($directory . $filename, file_get_contents($src)); } if (!$rs) throw new Exception(‘上传文件失败,可能原因是服务器‘ . $directory . ‘目录没有写入权限‘, 204); if (!$filename) { throw new Exception(‘没有发现图像文件‘, 204); } $msg = ‘上传成功:文件名:‘.$directory . $filename; $success=true; } catch (Exception $exc) { $msg = "上传失败:".$exc->getMessage(); } $data = array(‘success‘ => $success, ‘msg‘ => $msg); echo json_encode($data); ?>
本文出自 “PHP开垦农民” 博客,请务必保留此出处http://lailaiji.blog.51cto.com/1790290/1570340
chrome及safari浏览器实现直接粘贴图片(纯JS)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。