照片提交软件ImgUploadJS：用HTML5 File API 完成截图粘

日期：2021-02-24 类型：科技新闻 

关键词：建站平台有哪些，如何建设网站，免费自助建站，如何建立一个网站，网站建站的

1 . 情况及实际效果

当今互联网技术提交文档数最多的便是照片文档了，可是传统式web照片的截图提交必须：截图储存->挑选相对路径->储存后再点一下提交->挑选相对路径->提交->插进。
照片文档提交也必须：挑选相对路径再->提交->插进，流程复杂，互联网技术体验为王，假如适用截图粘贴提交、拖拽提交将大大提高体验。
当今知乎和github对当代访问器均适用这两种特点，闲来无事就学习培训完成了1下，今日就说1说这个1kb软件完成甚么作用，如何应用和基本原理。
最先看1下插实际效果:
截图后立即粘贴提交。

拖拽提交

http互联网


2.应用示例
立即启用：
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>   


3.访问器适用
当今版本号只适用下列，访问器，后期将会会适用更多访问器。
•IE11
•Chrome
•FireFox
•Safari(未测式，基础理论应当适用)
4.基本原理及源代码
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') > ⑴) {    
  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. }  
上一篇：详解HTML5中div和section和article的差别 返回下一篇：没有了