Php implements screenshot Pasting and upload.

Php implements the paste and 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

<? Php 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; } ?>     <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 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.