Php implements the screenshot Pasting and upload function, and php uploads screenshots.

Php implements the paste and upload function, and php pastes and uploads

Today, I found that segmentfault's comment can be pasted and uploaded, So I studied how to implement it!
The principle is very simple. In fact, it is to monitor and paste events, and then check whether there are images in the pasted items. If so, ajax upload is directly triggered.

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

<? Phpheader ("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); // only images in png format can be obtained. Therefore, you only need to process png. $ name = md5 (time ()). '.png '; // the file name is md5 processed here. 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> // search for the box element, check the document. querySelector ('# box '). addEventListener ('paste ', function (e) {// determine whether the image is pasted if (e. clipboardData & e. clipboardData. items [0]. type. indexOf ('image')>-1) {var that = this, reader = new FileReader (); file = e. clipboardData. items [0]. getAsFile (); // ajax uploads an image 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 = ''; document. getElementById ("img_puth "). value = img. src;} // this. result to get the base64 (which can be used for instant display) fd of the image. append ('file', this. result); that. innerHTML = ''; xhr. send (fd);} reader. readAsDataURL (file) ;}}, false); </script>

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