• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    图片上传插件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. }  
    上一篇：HTML5 History API 实现无刷新跳转
    下一篇：Html5实现二维码扫描并解析
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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