<?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)); //截图得到的只能是png格式图片,所以只要处理png就行了
$name = md5(time()) . '.png'; // 这里把文件名做了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>
//查找box元素,检测当粘贴时候,
document.querySelector('#box').addEventListener('paste', function(e) { //判断是否是粘贴图片
if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1)
{
var that = this,
reader = new FileReader();
file = e.clipboardData.items[0].getAsFile(); //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 = '<img src="'+img.src+'" alt=""/>';
document.getElementById("img_puth").value = img.src;
} // this.result得到图片的base64 (可以用作即时显示)
fd.append('file', this.result);
that.innerHTML = '<img src="'+this.result+'" alt=""/>';
xhr.send(fd);
}
reader.readAsDataURL(file);
}
}, false);
</script>

php文件粘贴上传的更多相关文章

  1. 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  2. [转]Kindeditor图片粘贴上传(chrome)

    原文地址:https://www.cnblogs.com/jsper/p/7608004.html 首先要赞一下kindeditor,一个十分强大的国产开源web-editor组件. kindedit ...

  3. 让富文本编辑器支持复制doc中多张图片直接粘贴上传

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难 ...

  4. Kindeditor图片粘贴上传(chrome)

    kindeditor4.1.x版本已支持图片批量上传,不过传统的选文件上传的方式依然效率低下. 很多时候,编辑人员可能需要将一个文档中图片上传到网上,那么,按照传统的上传方法,他必须先将图片另存为到本 ...

  5. js实现图片粘贴上传到服务器并展示

    最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...

  6. Web大文件(夹)上传(断点续传)控件发布-Xproer.HttpUploader6

    版权所有 2009-2017荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  7. 如何上传网站程序(文件浏览器上传网页、FileZilla上传网站程序)

    问题场景: 网页制作完成后,程序需上传至虚拟主机. 注意事项: Windows系统的主机请将全部网页文件直接上传到FTP根目录,即 / . Linux系统的主机请将全部网页文件直接上传到 /htdoc ...

  8. Web大文件(夹)上传(断点续传)控件-Xproer.HttpUploader6

    版权所有 2009-2017荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  9. vue文件夹上传组件选哪个好?

    一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...

随机推荐

  1. 微软开放技术发布开源的微软云服务器底盘管理器 (Chasis Manager) 软件

     发布于 2014-07-14 作者 陈 忠岳 今天,微软公司加入开放计算项目(OCP),贡献出硬件和软件规范,管理 API 和协议,机械 CAD 模型,以及电路板文件和 Gerbers(描述印刷 ...

  2. 单独启动tomcat

    原料: jdk-1_5_0_13-windows-i586-p.exe apache-tomcat-5.5.25.zip 安装jdk,路径为:C:\Program Files\Java\jdk1.5. ...

  3. ACM1019_最大公倍数

    /*问题说明 一组正整数的最小公倍数(LCM)是最小的正整数约数集合中的所有号码. 例如,5,7和15的最小公倍数是105. 输入 输入将包括多个问题的实例.输入的第一行中,将包含一个整数, 表示问题 ...

  4. Python中逗号作用的实例分析

    逗号在类型转化中的使用 主要是元组的转换 例如: >>> a=11>>> b=(a)>>> b11>>> b=(a,)>& ...

  5. Linq to sql语法

    LINQ to SQL语句(1)之Where Where操作 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的子 ...

  6. vijos1055 奶牛浴场

    挺好的一道题呢 O(n^2)或者O(wh) #include<cstdio> #include<cstring> #include<cstdlib> #includ ...

  7. 手把手教你mysql(十)索引

    手把手教你mysql(十)索引 一:索引的引入 索引定义:索引是由数据库表中一列或者多列组合而成,其作用是提高对表中数据的查询速度. 类似于图书的目录,方便快速定位,寻找指定的内容,如一本1000页的 ...

  8. Maven实现Web应用集成測试自己主动化 -- 部署自己主动化(WebTest Maven Plugin)

    上篇:Maven实现Web应用集成測试自己主动化 -- 測试自己主动化(WebTest Maven Plugin) 之前介绍了怎样在maven中使用webtest插件实现web的集成測试,这里有个遗留 ...

  9. ural 1018 Binary Apple Tree(树形dp | 经典)

    本文出自   http://blog.csdn.net/shuangde800 ------------------------------------------------------------ ...

  10. Android自己定义控件而且使其能够在xml中自己定义属性

    为什么要自己定义View android开发中自己定义View的优点是显而易见的.比方说以下的这个顶部导航,它被设计出如今应用的每一个界面,但每次的内容却不尽同样.我们不能在每一个layout资源中都 ...