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

<!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. Java 基础 enum枚举类 的创建/使用/接口继承 ,以及手动创建枚举类的对象为:public static final

    笔记: import java.lang.*; /**一:枚举类 : enum Season implements info { s1(),s2(),s3(),s4() }; //s1--s4 放在S ...

  2. [转载]Java 应用性能调优实践

    Java 应用性能调优实践 Java 应用性能优化是一个老生常谈的话题,笔者根据个人经验,将 Java 性能优化分为 4 个层级:应用层.数据库层.框架层.JVM 层.通过介绍 Java 性能诊断工具 ...

  3. [转载]yarn的安装和使用

    yarn的安装和使用 2018-08-02 10:45:41 yw00yw 阅读数 50696 文章标签: yarn 更多 分类专栏: 工具   版权声明:本文为博主原创文章,遵循CC 4.0 BY- ...

  4. 2019EC-Final参赛总结

    本来想发知乎上的,后来发现太长就放这好了23333 没写过这种东西,所以写得比较混乱&流水账 以下内容均为我的个人视角XD   赛前 在车上的时候,红太阳跟我们说他头晕(虽然他好像每场比赛都头 ...

  5. 11、Spring Boot 2.x 集成 HBase

    1.11 Spring Boot 2.x 集成 HBase 完整源码: Spring-Boot-Demos

  6. 09_编写脚本,实现人机<石头,剪刀,布>游戏

    #!/bin/bashgame=(石头 剪刀 布)num=$[RANDOM%3]computer=${game[$num]}#通过随机数获取计算机的出拳#出拳的可能性保存在一个数组中,game[0], ...

  7. 百度ueditor中复制word图文时图片转存任然保持灰色不可用

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  8. CF788B Weird journey 欧拉路径+计数

    给定一张 $n$ 个点 $m$ 条无向边的图(无重边) :定义一种行走方案为:$m-2$ 条边走 $2$ 次,其余 $2$ 条边只走一次. 两个行走方案不同,当且仅当走一次的两条边中有不同的. 一条边 ...

  9. LOJ #121. 「离线可过」动态图连通性 LCT维护最大生成树

    这个还是比较好理解的. 你考虑如果所有边构成一棵树的话直接用 LCT 模拟一波操作就行. 但是可能会出现环,于是我们就将插入/删除操作按照时间排序,然后依次进行. 那么,我们就要对我们维护的生成树改变 ...

  10. POJ 2486 Apple Tree ——（树型DP）

    题意是给出一棵树,每个点都有一个权值,从1开始,最多走k步,问能够经过的所有的点的权值和最大是多少(每个点的权值只能被累加一次). 考虑到一个点可以经过多次,设dp状态为dp[i][j][k],i表示 ...