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 相关文章推荐
基于mysql的论坛(3)
Oct 09 PHP
PHP 最大运行时间 max_execution_time修改方法
Mar 08 PHP
无需重新编译php加入ftp扩展的解决方法
Feb 07 PHP
PHP遍历目录并返回统计目录大小
Jun 09 PHP
php实现根据字符串生成对应数组的方法
Sep 22 PHP
php使用cookie保存登录用户名的方法
Jan 26 PHP
PHP获取昨天、今天及明天日期的方法
Feb 03 PHP
PHP6新特性分析
Mar 03 PHP
php图片添加文字水印实现代码
Mar 15 PHP
JSON字符串传到后台PHP处理问题的解决方法
Jun 05 PHP
YII2自动登录Cookie总是失效的解决方法
Jun 28 PHP
thinkphp 框架数据库切换实现方法分析
May 18 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代码运行时间查看类代码分享
2011/08/06 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
JS实现复制功能
2017/03/01 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
Python 迭代器与生成器实例详解
2017/05/18 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
测试工程师职业规划书
2014/02/06 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
返乡农民工证明
2015/06/24 职场文书