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

<!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. LeetCode刷题--有效的括号（简单）

    题目描述 给定一个只包括 ' ( ' , ' )  ',  ' { ' , ' } ' , ' [ ' , ' ] ' 的字符串,判断字符串是否有效.有效字符串需满足: 左括号必须用相同类型的右括号闭 ...

  2. Selenium（十）测试用例错误处理、日志接口、多用户测试

    1.一般的错误类型 2.查看错误提示,是一个div,以id为例找到该元素 3.修改测试用例 def checkResult(driver,err_id): try: err = driver.find ...

  3. laravel本地开发环境的安装及配置 - Windows：安装 Laravel Homestead 虚拟机

    一.安装 VirtualBox-5.2.22-126460-Win.exe 和 vagrant_2.2.2_x86_64.msi(可视化安装包安装); 安装在D盘 二.导入 Homestead Vag ...

  4. 算法设计与分析 - 李春葆 - 第二版 - html v2

    1 .1 第 1 章─概论   1.1.1 练习题   1 . 下列关于算法的说法中正确的有( ).   Ⅰ Ⅱ Ⅲ Ⅳ .求解某一类问题的算法是唯一的   .算法必须在有限步操作之后停止   .算法 ...

  5. mysql基础篇--库的管理

    库的创建 create database [if not exists] 库名; 库的修改 alter database 库名 character set 字符集; #更改库的字符集 库的删除 dro ...

  6. BZOJ 3576: [Hnoi2014]江南乐 (SG函数)

    题意 有nnn堆石子,给定FFF,每次操作可以把一堆石子数不小于FFF的石子平均分配成若干堆(堆数>1>1>1). 平均分配即指分出来的石子数中最大值减最小值不超过111.不能进行操 ...

  7. python以下划线开头的变量和函数的作用

    在python中,我们经常能看到很多变量名以_下划线开头,而且下划线的数量还不一样,那么这些变量的作用到底是什么? 变量名分类: # 以数字.字母开头: 正常的公有变量名a = 1def aa(): ...

  8. How to connect oracle databse

    1. 下載客戶端Oracle Developer Tools for Visual Studio_32bit 安裝后通過配置tnsnames.ora指定連接 C:\app\user name\prod ...

  9. JavaScript中BOM的重要内容总结

    一.BOM介绍 BOM(Browser Object Model),浏览器对象模型: 用来操作浏览器部分功能的API: BOM由一系列的对象构成,由于主要用于管理窗口和窗口之间的通讯,所以核心对象是w ...

  10. 数据结构实验之二叉树四：（先序中序）还原二叉树 （SDUT 3343）

    #include <bits/stdc++.h> using namespace std; struct node { char data; struct node *lc, *rc; } ...