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> ...
随机推荐
- 【JavaScript_轮播图】
今天给大家带来的是我自己做的一个轮播图效果,让我们一起来学习一下吧. 这是我的页面所有代码: <!DOCTYPE html> <html> <head> <m ...
- 利用xcode生成的app生成可以在iphone和itouch上运行的ipa安装包
在编译好的真机版目录下的.app文件,至于生成真机可以运行的app的方法,有两种方式,一种是交99美元获得一个证书,另外一种是破解的方式,在此不再详述,本文假设你已经生成了真机上可以运行的app包了( ...
- Java Reflection(getXXX和getDeclaredXXX)
package com.sunchao.reflection; public class Person { private int age ; private String name; public ...
- Mysql执行计划说明
Mysql执行计划翻译: 官网原文请见http://dev.mysql.com/doc/refman/5.6/en/explain-output.html:5.6 EXPLAIN语句提供有关SELEC ...
- WPF 简易新手引导
这两天不忙,所以,做了一个简易的新手引导小Demo.因为,不是项目上应用,所以,做的很粗糙,也就是给需要的人,一个思路而已. 新手引导功能的话,就是告诉用户,页面上操作的顺序,第一步要做什么,第二步要 ...
- Centos7-卸载自带的jdk 安装jdk8
卸载JDK Centos7一般都会带有自己的openjdk,我们一般都回用oracle的jdk,所以要卸载 步骤一:查询系统是否以安装jdk #rpm -qa|grep java 或 #rpm ...
- 记一些安卓app反编译修改的记录
2017-12-2209:00:40 好几天没有写过博客了,因为马上要期末考试,只能暂且放下我的小玩物,专心复习我的期末考试. 今天突然想设置一个安卓的栏目,记录下自己从高中就爱玩的一些东西,像刷机呀 ...
- background:url() 背景图不显示
奇怪的问题: .box-3 { width: 100%; height: 500px; border: solid 2px red; margin-top: 70px; padding: 0 0 0 ...
- scrapy_图片下载
需要安装第三方库: 安装 pillow库 pip install -i https://pypi.doubanio.com/simple pillow 如何对图片进行自动下载? 首先明白,图片去哪下? ...
- Long转Date/页面自定义标签
运行时发现异常:org.apache.jasper.JasperException: javax.el.ELException: java.lang.IllegalArgumentException: ...