图片上传插件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 background属性调整增强介绍
Dec 18 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 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
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
Python3处理文件中每个词的方法
2015/05/22 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
营销与策划个人求职信
2013/09/22 职场文书
学习党章思想汇报
2014/01/07 职场文书
报到证丢失证明
2014/01/11 职场文书
基层党支部整改方案
2014/10/25 职场文书
2014年环卫工作总结
2014/11/22 职场文书