当前位置:首页 > PHP教程 > php上传下载 > 列表

php实现粘贴截图并完成上传功能

发布:smiling 来源: PHP粉丝网  添加日期:2021-05-27 10:04:15 浏览: 评论:0 

知乎回答问题编辑框用 Ctrl+V 粘贴图片是如何实现的?刚发现知乎编辑器有这么强的功能,在研究的过程中发现原来segmentfault也实现了这么强大的功能,下面结合2者来看看我们如何实现。

今天发现segmentfault的评论留言里面可以粘贴上传图片,于是研究了下怎么实现的!

原理很简单其实就是监控粘贴事件,然后检测是否粘贴的东西里面有图片,有的话直接触发ajax上传

代码可以直接运行,有兴趣你们可以试试

  1. <?php 
  2. header("Access-Control-Allow-Origin:*"); 
  3. $url = 'http://'.$_SERVER['HTTP_HOST']; 
  4. $file = (isset($_POST["file"])) ? $_POST["file"] : ''
  5. if($file
  6. $data = base64_decode(str_replace('data:image/png;base64,'''$file)); //截图得到的只能是png格式图片,所以只要处理png就行了 
  7. $name = md5(time()) . '.png'// 这里把文件名做了md5处理 
  8. file_put_contents($name$data); 
  9. echo"$url/$name"
  10. die
  11. ?> 
  12.  
  13.  
  14. <div id="box"style="width:400px;height:400px;border:1px solid;"contenteditable> 
  15. </div> 
  16. <input type="hidden"name="img"value=""id="img_puth"/> 
  17.  
  18. <script> 
  19. //查找box元素,检测当粘贴时候, 
  20. document.querySelector('#box').addEventListener('paste'function(e) { 
  21.  
  22. //判断是否是粘贴图片 
  23.  if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1)  
  24. var that = this, 
  25. reader = new FileReader(); 
  26. file = e.clipboardData.items[0].getAsFile(); 
  27.  
  28. //ajax上传图片 
  29.  reader.onload = function(e)  
  30.  var xhr = new XMLHttpRequest(), 
  31.  fd = new FormData(); 
  32.  
  33.  xhr.open('POST''', true); 
  34.  xhr.onload = function ()  
  35.  var img = new Image(); 
  36.  img.src = xhr.responseText; 
  37.  
  38.  // that.innerHTML = '<img src="'+img.src+'"alt=""/>'; 
  39.  document.getElementById("img_puth").value = img.src; 
  40.  
  41.  // this.result得到图片的base64 (可以用作即时显示) 
  42.  fd.append('file', this.result);  
  43.  that.innerHTML = '<img src="'+this.result+'"alt=""/>'
  44. xhr.send(fd); 
  45. reader.readAsDataURL(file); 
  46. }, false); 
  47. </script>

Tags: php截图上传

分享到: