杰网资源 Design By www.escxy.com
                                一 . 背景及效果 
当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入。
图片文件上传也需要:选择路径再->上传->插入,步骤繁杂,互联网体验为王,如果支持截图粘贴上传、拖拽上传将大大提升体验。
当前知乎和github对现代浏览器均支持这两种特性,闲来无事就学习实现了一下,今天就说一说这个1kb插件实现什么功能,怎么使用和原理。
首先看一下插效果:
截图后直接粘贴上传。
拖拽上传
http网络
二.使用示例
直接调用:
XML/HTML Code复制内容到剪贴板
                                当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入。
图片文件上传也需要:选择路径再->上传->插入,步骤繁杂,互联网体验为王,如果支持截图粘贴上传、拖拽上传将大大提升体验。
当前知乎和github对现代浏览器均支持这两种特性,闲来无事就学习实现了一下,今天就说一说这个1kb插件实现什么功能,怎么使用和原理。
首先看一下插效果:
截图后直接粘贴上传。
拖拽上传
http网络
二.使用示例
直接调用:
XML/HTML Code复制内容到剪贴板
- <div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>
 - <script type="text/javascript" src="UploadImage.js"></script>
 - new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调
 - var img = new Image();
 - img.src = xhr.responseText;
 - this.appendChild(img);
 - });
 
AMD/CMD 
- <div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>
 - <script type="text/javascript" src="require.js"></script>
 - <script>
 - require(['UploadImage'], function (UploadImage) {
 - new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调
 - var img = new Image();
 - img.src = xhr.responseText;
 - this.appendChild(img);
 - });
 - })
 - </script>
 
三.浏览器支持 
当前版本只支持以下,浏览器,后期可能会支持更多浏览器。 
•IE11 
•Chrome 
•FireFox 
•Safari(未测式,理论应该支持) 
四.原理及源码 
1.粘贴上传 
处理目标容器(id)的paste事件,读取e.clipboardData中的数据,如果是图片进行以下处理: 
用H5 File API(FileReader)获取文件的base64代码,并构建FormData异步上传。 
2.拖拽上传 
处理目标容器(id)的drop事件,读取e.dataTransfer.files(H5 File API: FileList)中的数据,如果是图片并构建FormData异步上传。 
以下是初版本代码,比较简单。不再赘述。 
部份核心代码 
- function UploadImage(id, url, key)
 - {
 - this.element = document.getElementById(id);
 - this.url = url; //后端处理图片的路径
 - this.imgKey = key || "PasteAreaImgKey"; //提到到后端的name
 - }
 - UploadImage.prototype.paste = function (callback, formData)
 - {
 - var thatthat = this;
 - this.element.addEventListener('paste', function (e) {//处理目标容器(id)的paste事件
 - if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
 - var that = this,
 - reader = new FileReader();
 - file = e.clipboardData.items[0].getAsFile();//读取e.clipboardData中的数据:Blob对象
 - reader.onload = function (e) { //reader读取完成后,xhr上传
 - var xhr = new XMLHttpRequest(),
 - fd = formData || (new FormData());;
 - xhr.open('POST', thatthat.url, true);
 - xhr.onload = function () {
 - callback.call(that, xhr);
 - }
 - fd.append(thatthat.imgKey, this.result); // this.result得到图片的base64
 - xhr.send(fd);
 - }
 - reader.readAsDataURL(file);//获取base64编码
 - }
 - }, false);
 - }
 
杰网资源 Design By www.escxy.com
                            
                                广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
                        免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
杰网资源 Design By www.escxy.com
                        暂无评论...
                                    稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
                        





