php实现粘贴截图并完成上传功能-php手册-php.cn

Home

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 13, 2016 am 09:04 AM

phpscreenshot

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

　　今天发现segmentfault的评论留言里面可以粘贴上传图片,于是研究了下怎么实现的!

　　原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传

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

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;

}

//查找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 = ' php实现粘贴截图并完成上传功能 ';

document.getElementById("img_puth").value = img.src;

}

// this.result得到图片的base64 (可以用作即时显示)

fd.append('file', this.result);

that.innerHTML = ' php实现粘贴截图并完成上传功能 ';

xhr.send(fd);

}

reader.readAsDataURL(file);

}

}, false);

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn