ImgUploadJS中如何使用HTML5FileAPI实现截图粘贴上传、拖拽上传

这篇文章将为大家详细讲解有关ImgUploadJS中如何使用HTML5 File API 实现截图粘贴上传、拖拽上传 ,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

站在用户的角度思考问题,与客户深入沟通,找到宝鸡网站设计与宝鸡网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、网站建设、企业官网、英文网站、手机端网站、网站推广、空间域名、雅安服务器托管、企业邮箱。业务覆盖宝鸡地区。

一 . 背景及效果

当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入。
图片文件上传也需要:选择路径再->上传->插入,步骤繁杂,互联网体验为王,如果支持截图粘贴上传、拖拽上传将大大提升体验。
当前知乎和github对现代浏览器均支持这两种特性,闲来无事就学习实现了一下,今天就说一说这个1kb插件实现什么功能,怎么使用和原理。
首先看一下插效果:
截图后直接粘贴上传。

ImgUploadJS中如何使用HTML5 File API 实现截图粘贴上传、拖拽上传

拖拽上传

ImgUploadJS中如何使用HTML5 File API 实现截图粘贴上传、拖拽上传

http网络

ImgUploadJS中如何使用HTML5 File API 实现截图粘贴上传、拖拽上传


二.使用示例
直接调用:

XML/HTML Code复制内容到剪贴板

          new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调     var img = new Image();     img.src = xhr.responseText;     this.appendChild(img);     });


AMD/CMD

XML/HTML Code复制内容到剪贴板

         


三.浏览器支持
当前版本只支持以下,浏览器,后期可能会支持更多浏览器。
•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异步上传。
以下是初版本代码,比较简单。不再赘述。
部份核心代码

XML/HTML Code复制内容到剪贴板

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);    
}

关于“ImgUploadJS中如何使用HTML5 File API 实现截图粘贴上传、拖拽上传 ”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站标题:ImgUploadJS中如何使用HTML5FileAPI实现截图粘贴上传、拖拽上传
标题URL:http://scyanting.com/article/igesip.html

其他资讯