php实现粘贴截图并完成上传功能
<?php
header(
"Access-Control-Allow-Origin:*"
);
$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实现粘贴截图并完成上传功能的更多相关文章
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...
- [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...
- django下的ckeditor 5.0 文本编辑器上传功能。
完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...
- H5 利用vue实现图片上传功能。
H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...
- PHPCMS_V9 模型字段添加单文件上传功能
后台有“多文件上传”功能,但是对于有些情况,我们只需要上传一个文件,而使用多文件上传功能上传一个文件,而调用时调用一个文件URL太麻烦了. 使用说明: 1.打开phpcms\modules\conte ...
- ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能
tinymce 插件不提供免费的本地图片上传功能,所以自己将uploadify这个上传插件整合到tinymce,实现本地上传,还用到了jquery.ui插件,先展示全部的代码 @model TinyM ...
- 配置php.ini实现PHP文件上传功能
本文介绍了如何配置php.ini实现PHP文件上传功能.其中涉及到php.ini配置文件中的upload_tmp_dir.upload_max_filesize.post_max_size等选项,这些 ...
- MVC5:使用Ajax和HTML5实现文件上传功能
引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...
- Spring 文件上传功能
本篇文章,我们要来做一个Spring的文件上传功能: 1. 创建一个Maven的web工程,然后配置pom.xml文件,增加依赖: <dependency> <groupId> ...
随机推荐
- bat判断当前目录是否是根目录
记录下,一遍查用. @echo offif "%~p0"=="\" (echo 在根目录) else echo 不在根目录pause
- 调用QQ聊天功能
[HTML]: <a href="javascript:void(0);" onclick="chatQQ()">咨询客服</a> fu ...
- @synchronized(self)
@synchronized 的作用是创建一个互斥锁,保证此时没有其它线程对self对象进行修改.这个是objective-c的一个锁定令牌,防止self对象在同一时间内被其 它线程访问,起到线程的保护 ...
- 【绘图技巧】ps快捷键的用法
Ctrl+N:新建画布 Ctrl+O:打开对话框 F: 在三种画布中切换 Z:缩放工具(临时) Ctrl+0:满画面显示 空格:切换到手(临时) Ctrl+":网 ...
- oracle11g安装教程(注意事项及图文教程)
Oracle安装与重装注意事项 1.安装oracle(**) 注意:安装Oracle之前确定自己的主机(计算机)名要保证计算机名是英文的. 1.oracle的安装文件不要放在含有中文的目录当中,如:d ...
- ASP.NET Core 一步步搭建个人网站(6)_单页模式和优化
前言 HI,有段时间没有更新了,主要因为第一年前事情比较多,有些事得忙着张罗下:第二呢,对个人网站进行了一次大范围的优化,主要是申请的云服务器资源有限,1m的网络带宽,带上图片展示的话,打开网站的平均 ...
- YAML书写规范
1. 认识 YAML YAML是一个类似 XML.JSON 的标记性语言.YAML 强调以数据为中心,并不是以标识语言为重点.因而 YAML 本身的定义比较简单,号称"一种人性化的数据格式语 ...
- Spring+redis整合遇到的问题集以及注意事项
redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...
- Junit4X系列--hamcrest的使用
OK,在前面的一系列博客里面,我整理过了Assert类下面常用的断言方法,比如assertEquals等等,但是org.junit.Assert类下还有一个方法也用来断言,而且更加强大.这就是我们这里 ...
- j2e应用相关技术
j2e应用相关技术 轻量级j2e应用以传统的jsp作为变现层技术,以一系列开源框架作为MVC层,中间件,持久层解决方案,并将这些开源框架有机组合在一起,使得j2e具有高度的可扩展性,可维护性. ser ...