php教程分享

  1. php教程首页
  2. php上传下载

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

•php上传下载•阅读 425

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

相关推荐

  • PHP中多张图片上传并校验的实现

    PHP中多张图片上传并校验的实现PHP中多张图片上传并校验的实现：单张的图片上传是不复杂的，这里涉及到多张图片上传和对图片格式的校验，保证上传的一定是图片，防止上传其他文件到服务器。基本实现算法是使用数组的形式，把所有的图片提交个一个数组，…
    •php上传下载
    2015-05-214393

  • thinkphp实现图片上传功能分享

    thinkphp实现图片上传功能分享图片上传在网站里是很常用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php)和图片模型类(Image.class.php)。方便于我们去实现图片上传功能，下面是实现方…
    •php上传下载
    2016-06-1319109

  • PHP+apc+ajax实现的ajax_upload上传进度条代码

    本文实例讲述了PHP+apc+ajax实现的ajax_upload上传进度条代码，分享给大家供大家参考，具体如下：上传进度条是怎么实现的呢?原理是怎么样的呢?当我们浏览，选择上传后，会产生一个临时文件，上传的时把这个临时文件，上传到服务器，上传完成后，这个临时文件会被删除掉。如果我们能读取这个临时文件的大小，就知道上传进度是多少了，phpapc模块可以实现这个功能。一、安装apc模块下载地址:ht…
    •php上传下载
    2023-06-05398

  • php中CutyCapt实现网页截图保存代码

    网页截图这个功能大家可能用到最多的就是QQ截图,或利用asp.net来实现截图,其实我们也可以直接使用php来网页截图,下面我来给大家介绍php利用CutyCapt实现网页截图,有需要的朋友可参考.CutyCapt下载地址:http://sourceforge.net/projects/cutycapt/files/cutycapt/windowsCutyCapt不需要安装,直接保存到你的电脑中即…
    •php图像处理
    2023-06-17374
  • Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解php环境搭建

    Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解

    本文实例讲述了Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能，分享给大家供大家参考，具体如下：最近在开发一个本地互联网应用的项目,为了增加用户体验,需要在搜索结果左侧显示如图一所示的某个网站的缩略图效果,在网上不停地百度谷歌了一上午后,发现大多数实现少量截图还是可以的,如果大批量的截图总会在中途出现很多问题,最终也没有发现十分满意的程序，干脆自己弄吧。(图一)下面是在win…
    2023-06-21402

  • PHP脚本实现Markdown文章上传到七牛图床

    在使用Markdown编写文章之后，经常需要发布到不同的平台，这里会遇到一个问题，文章的图片需要手动的进行上传，管理起来非常不方便，因此，强烈建议将图片统一上传到图床中，这样的话一篇文章就可以轻松的同步到各大平台上面了。下面，用PHP来实现该功能，选用七牛云作为图床创建并进入项目$mkdirmarkdown-images-to-qiniu$cdmarkdown-images-to-qiniu安装七…
    •php上传下载
    2023-08-07399
  • jQuery+PHP实现图片上传并提交功能php上传下载

    jQuery+PHP实现图片上传并提交功能

    图片上传思路：通过ajax实现图片上传，然后把PHP返回的图片地址，加入到隐藏字段中，最后通过表单提交给后台PHP，代码如下。HTML代码zimg.html文件：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wid…
    2023-08-07369
  • PHP基于session.upload_progress 实现文件上传进度显示功能详解php上传下载

    PHP基于session.upload_progress 实现文件上传进度显示功能详解

    本文实例讲述了PHP基于session.upload_progress实现文件上传进度显示功能。分享给大家供大家参考，具体如下：介绍session.upload_progress是PHP5.4的新特征。当session.upload_progress.enabledINI选项开启时，PHP能够在每一个文件上传时监测上传进度。这个信息对上传请求自身并没有什么帮助，但在文件上传时应用可以发送一个POS…
    2023-08-08293