PHP realizes pasting screenshots and completing the upload function_PHP tutorial

PHP implements the function of pasting screenshots and completing the upload

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

　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

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; } ?>       <script></p> <p>//查找box元素,检测当粘贴时候,</p> <p>document.querySelector('#box').addEventListener('paste', function(e) {</p> <p> </p> <p>//判断是否是粘贴图片</p> <p>if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1)</p> <p>{</p> <p>var that = this,</p> <p>reader = new FileReader();</p> <p>file = e.clipboardData.items[0].getAsFile();</p> <p> </p> <p>//ajax上传图片</p> <p>reader.onload = function(e)</p> <p>{</p> <p>var xhr = new XMLHttpRequest(),</p> <p>fd = new FormData();</p> <p> </p> <p>xhr.open('POST', '', true);</p> <p>xhr.onload = function ()</p> <p>{</p> <p>var img = new Image();</p> <p>img.src = xhr.responseText;</p> <p> </p> <p>// that.innerHTML = '<img src="' img.src '"alt=""/>';</p> <p>document.getElementById("img_puth").value = img.src;</p> <p>}</p> <p> </p> <p>// this.result得到图片的base64 (可以用作即时显示)</p> <p>fd.append('file', this.result);</p> <p>that.innerHTML = '<img src="' this.result '"alt=""/>';</p> <p>xhr.send(fd);</p> <p>}</p> <p>reader.readAsDataURL(file);</p> <p>}</p> <p>}, false);</p> <p></script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<🎜>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)); //The screenshot can only get png format pictures, so just process the png.<🎜> <🎜>$name = md5(time()) . '.png'; // The file name is md5 processed here<🎜> <🎜>file_put_contents($name, $data);<🎜> <🎜>echo "$url/$name";<🎜> <🎜>die;<🎜> <🎜>}<🎜> <🎜>?>

<script> //Find the box element and detect when pasting, document.querySelector('#box').addEventListener('paste', function(e) { //Determine whether it is a pasted image if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) { var that = this, reader = new FileReader(); file = e.clipboardData.items[0].getAsFile(); //Ajax upload pictures 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 gets the base64 of the image (can be used for instant display) fd.append('file', this.result); that.innerHTML = '<img src="' this.result '"alt=""/>'; xhr.send(fd); } reader.readAsDataURL(file); } }, false); </script>

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

http://www.bkjia.com/PHPjc/1000072.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1000072.htmlTechArticlephp realizes pasting screenshots and completing the upload function. Today I found that you can paste and upload pictures in the comments of segmentfault, so I did some research. How to achieve it! The principle is very simple. In fact, it is to monitor the sticky...