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

<!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 函数中，os.linesep是干什么的

    os.linesep字符串给出当前平台使用的行终止符.例如,Windows使用'\r\n',Linux使用'\n'而Mac使用'\r'. def write_file(filename, subdom ...

  2. Ubuntu Linux使用sudo命令搭建java环境

    搬运stackoverflow 注意,以下所有命令需要在root权限下执行 1. 在Ubuntu下打开终端命令或用ssh连接到linux. 2. 更新仓库(只有Ubuntu17.4及以下系统可用): ...

  3. 行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素·

    行内元素进行绝对定位后会变成块级元素· position:absolute; <!DOCTYPE html><html lang="en"><head ...

  4. JavaMail使用SMTP协议发送电子邮件(详解)

    Properties props = new Properties(); props.setProperty("mail.transport.protocol", "sm ...

  5. java里getPath、 getAbsolutePath、getCanonicalPath的区别

    本文链接:https://blog.csdn.net/wh_19910525/article/details/9314675 File的这三个方法在api中都有说明,仅以程序为例说明. package ...

  6. 安装包设计-------打包（MFC）---------知识总结

    目录: 1.选择文件夹 2.判断文件夹或文件是否存在 3.通过cmd命令行向程序中传递参数. 4.路径处理 5.文件夹以及文件的删除 6.复制文件 7.创建目录 8.从当前的应用程序中抽取资源 9.引 ...

  7. CSPS模拟75&76

    感觉自己还是太菜了... 最近考试一直想不出来正解.难受(然而蒟蒻的博客没人看也要不来小猪peiqi的图) 模拟75:血炸... 考场上推了快两个小时的T1式子,然后心态炸裂,然后我也不知道自己干了什 ...

  8. 8月清北学堂培训 Day2

    今天是赵和旭老师的讲授~ 背包 dp 模型 背包 dp 一般是给出一些“物品”,每个物品具有一些价值参数和花费参数,要求 在满足花费限制下最大化价值或者方案数. 最简单几种类型以及模型: 0/1背包: ...

  9. masm for windows2015 下载安装

    下载地址: https://sm.myapp.com/original/Office/wasm2015.rar

  10. java代理，手把手交你写java代理

    一:常用的java代理模式 一般经常做java开发的知道java的代理模式一共有三种,第一种也就是静态代理,这种用法比较简单,没有什么魔法棒,比较好理解,另外两种分别是JDK代理和cglib代理,他们 ...