原理:监听粘贴 → 获取粘贴内容 → 将内容上传 → 抓取后返回替换至input

我们在生产中用到的界面: 测试地址 http://sms.reyo.cn 用户名:aa 密码:123456

更多功能:Java从网络批量获取图片并保存至本网站服务器后再自动插入文章中

以下是PHP实现:

<?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>

让input支持 ctrl v上传粘贴图片? 让input支持QQ截图或剪切板中的图像数据(Java实现保存)的更多相关文章

  1. php 上传图片,无刷新上传,支持多图上传,远程图片上传

    1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html ...

  2. jquery如何获取input(file)控件上传的图片名称,即"11111.jpg"

    html代码:<input name=file" type="file" id="file"/> Jquery代码:var file;$( ...

  3. skymvc文件上传支持多文件上传

    skymvc文件上传支持多文件上传 支持单文件.多文件上传 可以设定 文件大小.存储目录.文件类型 //上传的文件目录 $this->upload->uploaddir="att ...

  4. lumen 支持多文件上传

    1.webform (注意:name后面一定要加[]号) <form method="post" enctype="multipart/form-data" ...

  5. php 图片上传 并返回上传文件位置 支持多文件上传

    <?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...

  6. html中,文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  7. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  8. 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

  9. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

随机推荐

  1. 《CSS3专业网页开发指南》笔记

    书本:<CSS3专业网页开发指南>(the book of css3) Peter Gasston 著    李景媛 吴晓嘉 译 第1章: 1.box-sizing : IE8及以上版本 ...

  2. Android性能优化方法(五)

    有时候,我们的页面中可能会包含一些布局,这些布局默认是隐藏的,当用户触发了一定的操作之后,隐藏的布局才会显示出来.比如,我们有一个Activity用来显示好友的列表,当用户点击Menu中的“导入”以后 ...

  3. 快来玩“Gift大转盘”百分百赚好礼

    现在开始到今年的最后一天,你天天都可以来转100%中奖的“ Gift大转盘 ”.代金券.产品折扣.精美纪念礼,没有多余规则.全部网友都可参加,转到就是你赚到,赶快转起来吧! >>活动主页& ...

  4. 隐马尔科夫模型HMM学习最佳范例

    谷歌路过这个专门介绍HMM及其相关算法的主页:http://rrurl.cn/vAgKhh 里面图文并茂动感十足,写得通俗易懂,可以说是介绍HMM很好的范例了.一个名为52nlp的博主(google ...

  5. 软件工程结组开发软件特色——NABC模型

    特点:通过学生提前点餐,可以让摊主在准备食材的时候有个参照,当准备的食材比较少的时候可以及时回家取来. N(Need):每当放学的时候,学校外边的卖饭摊位总是挤满了人,好多同学都要排好长的队等比较长的 ...

  6. Keepalived+tomcat的HA配置

    需要节点 NODE1—————-IP:192.168.0.2 NODE2—————-IP:192.168.0.3 VIP—————-IP:192.168.0.10 以下操作在2台机器上都要运行 先编辑 ...

  7. div+css实现各种形状(精心整理)

    1.正方形.div {width: 100px;height: 100px;background: red;} 2.矩形.div {width: 200px;height: 100px;backgro ...

  8. Mvc4页面缓存设置Cookie导致缓存失效

    [OutputCache(Duration = 60, VaryByParam = "none")]        public ActionResult Index()      ...

  9. os.popen(command)

    command="/usr/local/sbin/xxx_cmd" os.popen(command) xxx_cmd是自己编译的二进制文件,如果不加上全路径/usr/local/ ...

  10. Xperf Analysis Basics(转)

      FQ不易,转载 http://randomascii.wordpress.com/2011/08/23/xperf-analysis-basics/ I started writing a des ...