代码比较简单，原理更简单，不多言请直接看代码。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>

<body>

<script>

document.onpaste = function(event){

  var items = (event.clipboardData || event.originalEvent.clipboardData).items;

  for (var i = 0 ; i < items.length ; i++) {

    var item = items[i];

    if (item.type.indexOf("image") != -1) {

      var file = item.getAsFile();

      console.log(file);

      upload_file_with_ajax(file);

    }

  }

}

function upload_file_with_ajax(file){

  var formData = new FormData();

  formData.append('file', file);

  $.ajax('./clipboard_js.php' , {

    type: 'POST',

    contentType: false,

    processData: false,

    data: formData,

    error: function() {

      console.log("error");

    },

    success: function(res) {

      console.log("ok");

    }

  });

}

</script>

</body>

</html>

网页是如何实现从剪贴板从读取图片并上传到server的的更多相关文章

  1. HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

    一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...

  2. HTML5 文件域+FileReader 分段读取文件并上传(七)-WebSocket

    一.单文件上传实例 HTML: <div class="container"> <div class="panel panel-default" ...

  3. HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)

    说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中. 1.简单分段读取文件为 ...

  4. HTML5 文件域+FileReader 读取文件并上传到服务器(三)

    一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...

  5. uboot下读取flash，上传tftp服务器、下载

    上传 setenv gatewayip 192.168.1.1; setenv serverip 192.168.1.7; setenv ipaddr 192.168.1.156 ; mw.b 0x8 ...

  6. Myeclipse中文件已经上传到server文件夹下，文件也没有被占用，可是页面中无法读取和使用问题的解决方法

    这个问题是因为Myeclipse中文件不同步引起的.在Myeclipse中,project文件是由Myeclipse自己主动扫描加入的,假设在外部改动了project文件夹中的文件但又关闭了自己主动刷 ...

  7. html2canvas 将网页截图为图片，上传base64 到服务端

    await html2canvas(getById("winyh"), { height:500, allowTaint: true, useCORS: true, }).then ...

  8. HTML中上传与读取图片或文件（input file）----在路上（25）

    input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...

  9. .net网站的文件上传读取进度条和断点下载

    文件上传到服务器时的进度读取 //调整上传配置 AdapterInfo(info); UpfileResult result = new UpfileResult(); try { //直接使用req ...

随机推荐

  1. 题解 [ZJOI2010]基站选址

    题解 [ZJOI2010]基站选址 题面 解析 首先考虑一个暴力的DP, 设\(f[i][k]\)表示第\(k\)个基站设在第\(i\)个村庄,且不考虑后面的村庄的最小费用. 那么有\(f[i][k] ...

  2. xShell终端中文乱码-解决方法

    中文乱码的原因有三种:(1)Linux系统的编码问题(2)xShell终端的编码问题(3)两端的语言编码不一致 linux系统编码 (1) locale:查看系统语言 (2)echo $LANG:查看 ...

  3. Oracle 数据库SQL审计

    在我们日常的工作中,一些安全性的要求高的数据库需要增加审计操作,哪个用户什么时间做了什么操作. 1.打开数据库的审计 alter system set audit_sys_operations=TRU ...

  4. bzoj4400

    /* * 此题同bzoj2725 * 增加了枚举边的操作 */ #include <bits/stdc++.h> ;// oo = 999999999; #define LL long l ...

  5. RX232串口发送

    在进行工程调试的时候有时候需要对变量进行观察,SingnaTap II Logic Analyzer 只能对管脚进行观察,所以要观察内部的变量必须把内部的变量进行输出.一种方法是直接把变量定义成管脚通 ...

  6. 解决zabbix的cannot allocate shared memory of size错误

    问题状态:zabbix_server 不能启动,系统CentOS 6.7 原因分析:这是因为内核对share memory的限制造成的. 用到如下命令ipcs [-m|l|a],sysctl [-a| ...

  7. iTerm2 半透明颜色主题与字体配置

    下载iTerm2https://www.iterm2.com/ 安装. 下载这个主题https://raw.githubusercontent.com/mbadolato/iTerm2-Color-S ...

  8. scrapy框架之Pipeline管道类

    Item Pipeline简介 Item管道的主要责任是负责处理有蜘蛛从网页中抽取的Item,他的主要任务是清洗.验证和存储数据.当页面被蜘蛛解析后,将被发送到Item管道,并经过几个特定的次序处理数 ...

  9. python 小游戏 “外星飞船入侵”

    Project Title 项目名称 “外星飞船入侵”, git地址:https://github.com/lilinyu861/Alien-Invasion 效果图: 参考: https://blo ...

  10. Robot Framework（十九） 附录

    6附录 6.1测试数据中的所有可用设置 6.1.1设置表 Setting表用于导入测试库,资源文件和变量文件,以及定义测试套件和测试用例的元数据.它可以包含在测试用例文件和资源文件中.请注意,在资源文 ...