欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-19 09:57:16
...
一 . 背景及效果

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

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

拖拽上传

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

http网络

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


二.使用示例
直接调用:
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. }