最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
在网页中实现“截屏”上传图片功能
时间:2012-08-18 编辑:简简单单 来源:一聚教程网
将下面的代码保存成html页面,然后使用QQ或者旺旺随便截一个图,回到该页面,ctrl+v,你会发现神奇的事情发生了
//因为安全原因,浏览器为我们提供了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 } } }; |
如果要实现上传其实很简单了,将DataURL保存到form中,然后异步提交
后端服务器将DataURL转换成图片,然后将物理路径返回
这样,一个完整的在网页中“截屏”上传图片的功能就实现了
相关文章
- C#复制数组的两种方式及效率比较解读 10-24
- ASP.NET Identity用法解析 10-24
- ASP.NET MVC使用Identity增删改查用户介绍 10-24
- C语言中atoi函数模拟实现介绍 10-18
- .Net反向代理组件Yarp用法介绍 10-10
- .NET使用YARP通过编码方式配置域名转发实现反向代理教程 10-10