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

<!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. 《流畅的Python》Object References, Mutability, and Recycling--第8章

    Object References, Mutability, and Recycling 本章章节: Variables Are Not Boxes identity , Equality ,  Al ...

  2. MongoDB常用语句大全

    原文出处:https://www.cnblogs.com/--smile/p/11055204.html 直接输入mongo进入数据库 查询操作 查看当前数据库版本 db.version() //4. ...

  3. 父元素设置固定宽度并设置overflow:scroll，如何让子元素撑开父元素

    <div class="a"> <div class="b"> <div class="c">内容内容, ...

  4. 002_C/C++笔试题_简单算法程序

    (一)冒泡排序法 #include <iostream> using namespace std; void bubblesort(int a[], int m); int main(vo ...

  5. 五十三.Docker概述、部署Docker、Docker镜像、Docker基本命令

    1.安装Docker 准备两台虚拟机,IP为192.168.1.10和192.168.1.20 安装docker-engine 和 docker-engine-selinux 关闭防火墙   **** ...

  6. PHPCMS v9插件包整合

    插件包是已经修改好的文件集合,您可以直接将插件包复制到您的网站中. 注意:插件包会替换phpcms中的文件,如果您修改过phpcms中的文件请先备份好旧的文件. 1.下载插件包 2.解压 3.复制里面 ...

  7. [Luogu] 1600

    https://www.luogu.org/problemnew/show/P1600 nlogn竟然T了 #include <iostream> #include <cstdio& ...

  8. CSP-S模拟测试69 题解

    一如既往的垃圾,又回到了那个场场垫底的自己,明明考场上都想到正解了,但是就是拿不到分,可能是互奶把rp用光了吧以后一定加强训练代码能力. T1: 考场上一直yy矩阵快速幂,虽然自己矩阵快速幂一点都不会 ...

  9. MySQL数据分析—（4）关系数据库的三个逻辑框架

    (一)前面课程逻辑梳理 任何一门数据的软件也好,数据构架也好,或者说是数据学科也好,最终都是要解决实际问题的,大家说是不是? 前面jacky讲为什么要引入数据库的时候,举了一个案例,大家还记的吗?大家 ...

  10. 什么是CSR

    CSR的全称是Certificate Signing Request. 是我们在申请Https证书是向CA所提供的一杯申请书.其内部储存了我们申请证书所需要的基本信息.它是一个经过Base64编码的纯 ...