脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > html5 >

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

  发布时间：2016-01-20 14:19:50   作者：佚名   我要评论
这篇文章主要介绍了图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传 的相关资料,需要的朋友可以参考下
一 . 背景及效果

当前互联网上传文件最多的就是图片文件了，但是传统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. }  

相关文章

  • vue.js实现图片文件批量上传代码

    vue.js批量上传文件代码是一款可实现删除，图片预览，文件批量上传，显示文件大小等功能，非常不错，需要的朋友前来下载使用吧
    2020-03-05

  • html+css+js 实现拍照预览上传图片功能

    我们在做网页时经常会需要有上传图片的需求，可能是选择图片或者拍照上传。本文记录了使用css+js实现图片选中后的预览及压缩上传功能，需要的朋友参考下吧
    2018-01-15

  • 基于vue.js框架制作图片上传组件特效源码

    基于vue.js框架制作图片上传组件特效源码是一款适用于手机端的图片上传代码，支持批量上传，拖到图片上传，显示文件数量和大小等功能。本段代码可以在各个网页使用，有需要
    2017-10-17

  • JS实现手机端多图片上传删除特效源码

    JS实现手机端多图片上传删除特效源码，因multiple在安卓手机中不兼容，所以在安卓上只能一次选中一张图片，在iOS系统上可以实现多图片的上传。本段代码可以在各个网页使用
    2017-02-22

  • 使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能

    这篇文章主要介绍了使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能,非常具有实用价值，需要的朋友可以参考下。
    2016-12-16

  • JS实现的图片上传对比度饱和度调整特效源码

    JS图片上传对比度饱和度调整代码是一款从本地上传图片到服务端，然后通过滤器算法来处理图片，为图片设置不同的亮度，对比度和饱和度，本段代码适应于所有网页使用，有需要
    2016-09-21

  • HTML5结合zyfile.js插件实现的多文件图片预览上传功能特效源码

    是一段实现了可以选择本地图片预览并上传的效果代码，在预览区的图片是可以删除的，同时将本地图片拖动到网页规定的区域内也是可以自动添加到预览区的，此段代码适用于所有
    2015-01-29

  • JS实现上传选择图片功能代码

    js上传选择图片功能代码是一款类似抽奖程序，上传预览图片选择任意一张，可以重置和停止选择，上传之后也可以还原，需要的朋友可以来脚本之家下载
    2020-06-12

最新评论

关注微信公众号

扫一扫