Php implements screenshot pasting and upload function _ PHP Tutorial-php Tutorial

Php implements the paste and upload function. Php implements the paste function and completes the upload function. Today, we found that segmentfault's comment message can be used to paste the uploaded image, so we studied how to implement it! The principle is very simple. it is actually to monitor and paste php to complete the upload function.

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.

?

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); // only images in png format can be obtained, so you only need to process png. $ Name = md5 (time (). '.png '; // the file name is md5. File_put_contents ($ name, $ data ); Echo "$ url/$ name "; Die; } ?> Script // Search for the box element and check if it is pasted, 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 (); // Upload an image using 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 = ''; Document. getElementById ("img_puth"). value = img. src; } // This. result: obtain the base64 of the image (which can be used for instant display) Fd. 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.

Today, I found that segmentfault's comment can be pasted and uploaded, so I studied how to implement it! The principle is very simple. it is actually monitoring and sticking...