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 相关文章推荐
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
Mar 03 PHP
PHP 数组排序方法总结 推荐收藏
Jun 30 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
Apr 08 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
May 05 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
Jul 28 PHP
php修改指定文件后缀的方法
Sep 11 PHP
php一个解析字符串排列数组的方法
May 12 PHP
PHP的全局错误处理详解
Apr 25 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
Mar 19 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
Nov 08 PHP
PHP iconv()函数字符编码转换的问题讲解
Mar 22 PHP
php操作redis常见方法示例【key与value操作】
Apr 14 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 gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
javascript学习网址备忘
2007/05/29 Javascript
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
常务副总经理岗位职责
2014/04/12 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript