<meta name="keywords" content="华夏棋牌,上传插件imguploadjs,,,截图粘贴上传,拖拽上传" />
华夏棋牌 > web前端 > H5教程 > 注释

图片上传插件ImgUploadJS:用HTML5 File API 完成截图粘贴上传、拖拽上传 _html5教程手艺

原创 2016-05-16 15:46:08 0 525
赞助会员专享特权
一 . 配景及效果

以后互联网上传文件最多的就是图片文件了,然则传统web图片的截图上传须要:截图生涯->选择蹊径->生涯后再点击上传->选择蹊径->上传->拔出。
图片文件上传也须要:选择蹊径再->上传->拔出,法式模范严重年夜,互联网体验为王,假定支持截图粘贴上传、拖拽上传将年夜年夜提升体验。
以后知乎和github对现代浏览器均支持这两种特点,闲来无事就学习完成了一下,明天就说一说这个1kb插件完成甚么功效,怎样应用和原理。
首先看一下插效果:
截图后直接粘贴上传。

拖拽上传

http群集


二.应用示例
直接挪用:
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. }
php中文网最新课程二维码
  • 相关标签:上传插件imguploadjs 截图粘贴上传 拖拽上传
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 若何应用input事宜来监听移动端的输入_html5教程手艺
  • 深刻剖析HTML5 Canvas控制图形矩阵变换的措施_html5教程手艺
  • 实例解说应用SVG制造loading加载动画的措施_html5教程手艺
  • 实例解说应用HTML5 Canvas API操作图形改变的措施_html5教程手艺
  • 图片上传插件ImgUploadJS:用HTML5 File API 完成截图粘贴上传、拖拽上传 _html5教程手艺
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173870)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(170040)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137359)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130694)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(130036)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节