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

最新推荐文章于 2021-09-22 20:04:54 发布

aiyitui0234

最新推荐文章于 2021-09-22 20:04:54 发布

阅读量197

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kevin7234/p/10617876.html

版权

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

<!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>

转载于:https://www.cnblogs.com/kevin7234/p/10617876.html