PHP でスクリーンショットの貼り付けとアップロード機能の完了を実現_PHP チュートリアル

phpでスクリーンショットを貼り付けてアップロード完了する機能を実現します

今日はsegmentfaultのコメントに画像を貼り付けてアップロードできることを知ったので、その方法を勉強してみました!

実際、原理は非常に単純で、貼り付けイベントを監視し、貼り付けられたものに写真があるかどうかを検出し、存在する場合は、ajax アップロードを直接トリガーします。

コードは直接実行できますので、興味があれば試してみてください。

?

1

以上がこの記事の全内容ですが、皆さんに気に入っていただければ幸いです。

http://www.bkjia.com/PHPjc/1000072.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/1000072.html技術記事 PHPにはスクリーンショットを貼り付けてアップロードを完了する機能が実装されています。今日、segmentfaultのコメントに画像を貼り付けてアップロードできることを発見したので、その原理は非常に簡単です。ベタベタ…

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["ファイル"])) $_POST["ファイル"] : ''; if($file) { $data =base64_decode(str_replace('data:image/png;base64,', '', $file)); //スクリーンショットは png 形式の画像しか取得できないため、png を処理するだけです。 $name = md5(time()) . '.png' // ファイル名はここで md5 で処理されます file_put_contents($name, $data); エコー "$url/$name"; 死ぬ; } ?> <スクリプト> //ボックス要素を検索し、貼り付け時に検出します。 document.querySelector('#box').addEventListener('paste', function(e) { //貼り付けられた画像かどうかを判定します if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) { var that = これ、 reader = new FileReader(); file = e.clipboardData.items[0].getAsFile(); //ajax アップロード写真 reader.onload = function(e) { var xhr = 新しい XMLHttpRequest(), fd = 新しい FormData(); xhr.open('POST', '', true); xhr.onload = 関数() { var img = 新しい画像(); img.src = xhr.responseText; // that.innerHTML = ''; document.getElementById("img_puth").value = img.src; } // this.result は画像の Base64 を取得します (インスタント表示に使用できます) fd.append('file', this.result); that.innerHTML = ''; xhr.send(fd); } reader.readAsDataURL(ファイル); } }、偽);