php实现粘贴截图并完成上传功能


Posted in PHP onMay 17, 2015

今天发现segmentfault的评论留言里面可以粘贴上传图片,于是研究了下怎么实现的!
原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传

代码可以直接运行,有兴趣你们可以试试

<?php
header("Access-Control-Allow-Origin:*");
$url = 'http://'.$_SERVER['HTTP_HOST'];
$file = (isset($_POST["file"])) ? $_POST["file"] : '';
if($file)
{
$data = base64_decode(str_replace('data:image/png;base64,', '', $file)); //截图得到的只能是png格式图片,所以只要处理png就行了
$name = md5(time()) . '.png'; // 这里把文件名做了md5处理
file_put_contents($name, $data);
echo"$url/$name";
die;
}
?>


<div id="box"style="width:400px;height:400px;border:1px solid;"contenteditable>
</div>
<input type="hidden"name="img"value=""id="img_puth"/>

<script>
//查找box元素,检测当粘贴时候,
document.querySelector('#box').addEventListener('paste', function(e) {

//判断是否是粘贴图片
 if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) 
{
var that = this,
reader = new FileReader();
file = e.clipboardData.items[0].getAsFile();

//ajax上传图片
 reader.onload = function(e) 
{
 var xhr = new XMLHttpRequest(),
 fd = new FormData();

 xhr.open('POST', '', true);
 xhr.onload = function () 
{
 var img = new Image();
 img.src = xhr.responseText;

 // that.innerHTML = '<img src="'+img.src+'"alt=""/>';
 document.getElementById("img_puth").value = img.src;
}

 // this.result得到图片的base64 (可以用作即时显示)
 fd.append('file', this.result); 
 that.innerHTML = '<img src="'+this.result+'"alt=""/>';
xhr.send(fd);
}
reader.readAsDataURL(file);
}
}, false);
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

PHP 相关文章推荐
删除及到期域名的查看(抢域名必备哦)
May 14 PHP
PHP伪造referer实例代码
Sep 20 PHP
一步一步学习PHP(1) php开发环境配置
Feb 15 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
Jun 30 PHP
xml在joomla表单中的应用详解分享
Jul 19 PHP
配置php网页显示各种语法错误
Sep 23 PHP
CodeIgniter生成网站sitemap地图的方法
Nov 13 PHP
PHP获取数组最后一个值的2种方法
Jan 21 PHP
php判断输入是否是纯数字,英文,汉字的方法
Mar 05 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
Oct 18 PHP
php之可变函数的实例详解
Sep 13 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
Apr 20 PHP
php获取json数据所有的节点路径
May 17 #PHP
php中memcache 基本操作实例
May 17 #PHP
PHP实现过滤各种HTML标签
May 17 #PHP
支持中文的PHP按字符串长度分割成数组代码
May 17 #PHP
php 批量查询搜狗sogou代码分享
May 17 #PHP
PHP解密Unicode及Escape加密字符串
May 17 #PHP
PHP实现远程下载文件到本地
May 17 #PHP
You might like
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
新闻工作者先进事迹
2014/05/26 职场文书
体现团队精神的口号
2014/06/06 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
人力资源管理求职信
2014/08/07 职场文书
领导班子四风表现材料
2014/08/23 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
小学国庆节活动总结
2015/03/23 职场文书