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 相关文章推荐
使用Sphinx对索引进行搜索
Jun 25 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
Aug 07 PHP
php递归删除目录下的文件但保留的实例分享
May 10 PHP
PHP获取毫秒级时间戳的方法
Apr 15 PHP
PHP生成plist数据的方法
Jun 16 PHP
PHP生成条形码大揭秘
Sep 24 PHP
Joomla使用Apache重写模式的方法
May 04 PHP
Yii2实现多域名跨域同步登录退出
Feb 04 PHP
PHP对象的浅复制与深复制的实例详解
Oct 26 PHP
PHP中in_array的隐式转换的解决方法
Mar 06 PHP
Laravel框架分页实现方法分析
Jun 12 PHP
PHP DB 数据库连接类定义与用法示例
Mar 11 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
怎样去阅读一份php源代码
2009/08/21 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
jqTransform美化表单
2015/10/10 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
Python实现类继承实例
2014/07/04 Python
python取代netcat过程分析
2018/02/10 Python
Python hashlib模块用法实例分析
2018/06/12 Python
详解Python正则表达式re模块
2019/03/19 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
俄语专业毕业生推荐信
2013/10/28 职场文书
工作决心书范文
2014/03/11 职场文书
法律进社区活动总结
2015/05/07 职场文书
卡特教练观后感
2015/06/08 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
护士业务学习心得体会
2016/01/25 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
python 实现图片特效处理
2022/04/03 Python