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

<!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. 【ZZNU-oj-2116:人间不值得】（1亿以内的货币拼音转数值求折扣价原价）--hash+String大法好+字符串处理+超大暴力模拟题

    B : 人间不值得 概览问题列表状态排名编辑 Progress Bar 时间限制:1 Sec 内存限制:256 MiB提交:146 答案正确:12 提交 编辑 题目描述 家缠万贯来几时,我今停杯一问之 ...

  2. 玩深度学习选哪块英伟达 GPU？有性价比排名还不够！

    本文來源地址:https://www.leiphone.com/news/201705/uo3MgYrFxgdyTRGR.html 与“传统” AI 算法相比,深度学习(DL)的计算性能要求,可以说完 ...

  3. javascript如何处理字符串中的\u

    问题: 字符串在页面显示的时候,有\u,如:Tesla\u8fc1\u79fb ,想要显示它的原文 let a = 'Tesla\u8fc1\u79fb' //显示 Tesla迁移 alert( un ...

  4. 一步一步pwn路由器之wr940栈溢出漏洞分析与利用

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 这个是最近爆出来的漏洞,漏洞编号:CVE-2017-13772 固 ...

  5. 打包完的rcp产品svn不储存密码问题

    原因是缺少org.eclipse.core.runtime.compatibility.auth 这个依赖,需要添加到依赖中去 因为使用SVNKit的时候会去调eclipse这个api 详情见: ht ...

  6. 向导中的参数传递 wizard param

    1.在向导页中使用WizardPage.this.getNextPage()方法可以获取到下一页的向导页: 2.在向导wizard中addPages()方法初始化的时候把整个页面传进去. 例:Wiza ...

  7. 解决GitHub下载速度太慢的问题

    更改hosts文件: Windows 更改C:\Windows\System32\drivers\etc\hosts文件,在文件中追加219.76.4.4 github-cloud.s3.amazon ...

  8. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  9. 047_批量下载有序文件(pdf、图片、视频等等)

    #!/bin/bash#本脚本准备有序的网络资料进行批量下载操作(如 01.jpg,02.jpg,03.jpg)#设置资源来源的域名连接 url="http://www.test.com/& ...

  10. 数据库学习之三--Select查询及运算符

    一.SELECT语句:用于从表中选取数据:语法如下: 1. 列查询: SELECT 列名称1,  列名称2 FROM 表名称: 2. 查询所有数据: SELECT * FROM 表名称: 3. 使用A ...