网页是如何实现从剪贴板从读取图片并上传到server的

Posted kevin7234

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页是如何实现从剪贴板从读取图片并上传到server的相关的知识，希望对你有一定的参考价值。

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

<!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的的主要内容，如果未能解决你的问题，请参考以下文章

java web开发，上传图片并读取

如何从数据库中读取图片，图片存在文件夹中

QT读取剪切板内容-实现复制粘贴文本和图片

在网页中如何将数据库的数据显示出来

java网页怎样从后台读取背景图片显示在前台页面

JS获取剪切板内容