图片粘贴上传！

MAN(华剑) · 发表于 2013-10-11 17:19:58

有没有插件或会程序的人实现图片粘贴上传
如ＱＱ邮箱的功能。。。。。

MAN(华剑) · 发表于 2013-10-11 17:20:25

在网上有找到资料：

在网页中实现“截屏”上传图片功能

最近手上负责的一个web产品做了一个用户调研，用研那边反馈用户最期待的两个功能之一是“希望有与QQ聊天一样的截图功能”。

对于web来说，用户提到这个需求，我们起初的想法可能都是：除非开发嵌入式控件，不然根本无法实现。

不过随着webkit等内核的浏览器兴起，我们完全可以借助W3C的一些API，和一些变通的方式实现这个功能。

今天就讲讲如何在web页面中实现“截屏”并且上传。

这里“截屏”之所以要打引号，是因为确实无法实现“截屏”，但是我们可以通过变通方式实现，比如客户短聊天软件，QQ，旺旺等，这些软件截屏之后，数据都会在“剪切板”中保存一份副本，这里其实主要是讲如何获取”剪切板”中的图片上传，并且显示在网页上。

我们需要用到以下两个功能

Clipboard API and events
This document describes APIs for clipboard operations such as copy, cut and paste in web applications.
File API
This specification provides an API for representing file objects in web applications, as well as programmatically selecting them and accessing their data.
有了这些资料，其实实现起来也是so easy!!

将下面的代码保存成html页面,然后使用QQ或者旺旺随便截一个图，回到该页面，ctrl+v，你会发现神奇的事情发生了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>粘贴图片</title>
</head>
<body>
<script language="javascript">
//因为安全原因，浏览器为我们提供了onpaste事件，读取剪贴板数据仅能在该事件发生时在事件处理程序中进行。
document.body.onpaste = function(e) {

//console.log(e)
var items = e.clipboardData.items;
for (var i = 0; i < items.length; ++i) {
      var item = e.clipboardData.items[i];
      if (items[i].kind == 'file' && items[i].type == 'image/png') {

//FileReader可以参考API
         var fileReader = new FileReader();

//readAsDataURL是一个异步过程，这里提供回调方法
         fileReader.onloadend = function () {
            var d = this.result.substr( this.result.indexOf(',')+1);
            var img = document.createElement("img");
            img.src= "data:image/jpeg;base64,"+d;
            document.body.appendChild(img);
         };

//DataURL，不清楚了可以去看下资料
         fileReader.readAsDataURL(item.getAsFile());
         break;
// Just get one
      }
}
};
</script>
</body>
</html>

mingkong · 发表于 2013-10-11 17:36:46

现在的版本还做不到。插件也没见过。

		自动登录	找回密码
密码			立即注册

[求助] 图片粘贴上传！