文档章节

利用ctrl+v实现粘贴截图完成上传功能

情人情人
 情人情人
发布于 2015/05/14 13:40
字数 214
阅读 36
收藏 0
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>


本文转载自:http://www.dahuzhi.com/Article/dy/id/239.html

情人情人
粉丝 9
博文 44
码字总数 5641
作品 0
海淀
私信 提问
C# winform截图、web Cropper图片剪切、上传

今天又来一弹,写了个小功能,windows 桌面截图,web剪切图片上传的功能。 废话不多说,直接上图: 1、winform 截屏功能 图1 主窗体 点击全屏截图,就已经全屏截图了,截图后,图片保存在程序...

听风.
2018/08/10
0
0
FTP Manage Tools--WEB FTP文件管理工具

(商用请联系作者获取授权,个人用户无限制) 简介 FTP Manage Tools(FTP管理工具)是一个基于WEB的FTP客户端程序,你可以通过它对你的FTP文件进行管理。 程序采用AJAX,由PHP+JQuery/JavaScri...

杜小豆
2016/04/14
7.3K
0
如何实现在IE中粘贴截图

@战毅 你好,想跟你请教个问题: 这个编辑器,如何才能在IE中实现qq截图的粘贴,看了许多编辑器貌似都不行。不知道这个通过配置能不能实现。另外,迷你版本的为啥没有直接截图的功能,而完整...

fengzhiya
2016/06/01
91
0
怎样使ChemDraw信息共享

我们在使用ChemDraw软件绘制化学结构结束的时候,需要把我们得到的图形共享出去,用到我们需要用到的地方。本文将主要为您讲解如何实现ChemDraw文档的信息共享,给大家做个参照。 ChemDraw软...

学术研究软件
2016/04/14
43
0
多种上传图片的方法

tags: 图片上传, multipart, 截图上传, file对象, FormData, 拖拽上传图片, dataTransfer, readAsDataURL 一个如下所示的发布框,经常会出现在各种微博、社区、论坛站点上,这类发布形式虽然...

筱飞
2016/06/07
114
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.7K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部