Home > Backend Development > PHP Tutorial > PHP realizes pasting screenshots and completing the upload function, PHP paste screenshots and upload_PHP tutorial

PHP realizes pasting screenshots and completing the upload function, PHP paste screenshots and upload_PHP tutorial

WBOY
Release: 2016-07-13 09:53:37
Original
990 people have browsed it

php realizes pasting screenshots and completing the upload function, php pastes screenshots and uploads

Today I found that you can paste and upload pictures in the comments of segmentfault, so I studied how to achieve it!
The principle is very simple. In fact, it is to monitor the paste event, and then detect whether there are pictures in the pasted things. If so, it will directly trigger the ajax upload

The code can be run directly. If you are interested, you can try it

<&#63;php
header("Access-Control-Allow-Origin:*");
$url = 'http://'.$_SERVER['HTTP_HOST'];
$file = (isset($_POST["file"])) &#63; $_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;
}
&#63;>


<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>
Copy after login

The above is the entire content of this article, I hope you all like it.

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1000254.htmlTechArticlephp realizes pasting screenshots and completing the upload function. PHP pastes screenshots and uploads. Today I found that you can paste and upload images in the comments of segmentfault. , so I studied how to achieve it! The principle is very simple...
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template