图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传


Posted in HTML / CSS onJanuary 20, 2016

一 . 背景及效果

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

图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传

拖拽上传

图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传

http网络

图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传


二.使用示例
直接调用:
XML/HTML Code复制内容到剪贴板
  1. <div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>    
  2. <script type="text/javascript" src="UploadImage.js"></script>    
  3. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调    
  4. var img = new Image();    
  5. img.src = xhr.responseText;    
  6. this.appendChild(img);    
  7. }); 

AMD/CMD

XML/HTML Code复制内容到剪贴板
  1. <div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>    
  2. <script type="text/javascript" src="require.js"></script>    
  3. <script>    
  4. require(['UploadImage'], function (UploadImage) {    
  5. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调    
  6. var img = new Image();    
  7. img.src = xhr.responseText;    
  8. this.appendChild(img);    
  9. });    
  10. })    
  11. </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异步上传。
以下是初版本代码,比较简单。不再赘述。
部份核心代码

XML/HTML Code复制内容到剪贴板
  1. function UploadImage(id, url, key)    
  2. {    
  3. this.element = document.getElementById(id);    
  4. this.url = url; //后端处理图片的路径    
  5. this.imgKey = key || "PasteAreaImgKey"; //提到到后端的name    
  6. }    
  7. UploadImage.prototype.paste = function (callback, formData)    
  8. {    
  9. var thatthat = this;    
  10. this.element.addEventListener('paste', function (e) {//处理目标容器(id)的paste事件    
  11. if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {    
  12. var that = this,    
  13. reader = new FileReader();    
  14. file = e.clipboardData.items[0].getAsFile();//读取e.clipboardData中的数据:Blob对象    
  15. reader.onload = function (e) { //reader读取完成后,xhr上传    
  16. var xhr = new XMLHttpRequest(),    
  17. fd = formData || (new FormData());;    
  18. xhr.open('POST', thatthat.url, true);    
  19. xhr.onload = function () {    
  20. callback.call(that, xhr);    
  21. }    
  22. fd.append(thatthat.imgKey, this.result); // this.result得到图片的base64    
  23. xhr.send(fd);    
  24. }    
  25. reader.readAsDataURL(file);//获取base64编码    
  26. }    
  27. }, false);    
  28. }  
HTML / CSS 相关文章推荐
需要知道的CSS3动画技术
Jan 01 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 HTML / CSS
table不让td文字溢出操作方法
Dec 24 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 #HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 #HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 #HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 #HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 #HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 #HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 #HTML / CSS
You might like
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
js右键菜单效果代码
2007/07/21 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python动态加载模块的3种方法
2014/11/22 Python
浅析Python中的for 循环
2016/06/09 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python重新加载模块的实现方法
2018/10/16 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
如何通过命令行进入python
2020/07/06 Python
详解Python中的路径问题
2020/09/02 Python
python中uuid模块实例浅析
2020/12/29 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
纪律教育学习月活动总结
2014/08/27 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书