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 相关文章推荐
用PHP制作静态网站的模板框架(二)
Oct 09 PHP
php+mysql 实现身份验证代码
Mar 24 PHP
jQuery 源码分析笔记
May 25 PHP
过滤掉PHP数组中的重复值的实现代码
Jul 17 PHP
浅析linux下apache服务器的配置和管理
Aug 10 PHP
apache中为php 设置虚拟目录
Dec 17 PHP
PHP中使用file_get_contents post数据代码例子
Feb 13 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
Sep 21 PHP
thinkPHP商城公告功能开发问题分析
Dec 01 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
Feb 04 PHP
CI(CodeIgniter)框架实现图片上传的方法
Mar 24 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
Dec 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
德生S2000电路分析
2021/03/02 无线电
深入掌握include_once与require_once的区别
2013/06/17 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php调用C代码的实现方法
2014/03/11 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
yii添删改查实例
2015/11/16 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
移动端界面的适配
2017/01/11 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
详解如何运行vue项目
2019/04/15 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
函授本科自我鉴定
2014/02/04 职场文书
同学联谊会邀请函
2019/06/24 职场文书
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript