前端进阶:原生JavaScript实现具有进度监听的文件上传预览组件

本文主要介绍如何使用原生js，通过面向对象的方式实现一个文件上传预览的组件，该组件利用FileReader来实现文件在前端的解析，预览，读取进度等功能，并对外暴露相应api来实现用户自定义的需求，比如文件上传，进度监听，自定义样式，读取成功回调等。

创新互联是一家专注于成都网站设计、网站制作与策划设计,嘉善网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:嘉善等地区。嘉善做网站价格咨询:028-86922220

组件设计架构如下：

涉及的核心知识点如下：

  1. 闭包：减少变量污染，缩短变量查找范围
  2. 自执行函数
  3. file API：对文件进行读取，解析，监控文件事件
  4. DocumentFragment API：主要用来优化dom操作
  5. minix ：用来实现对象混合
  6. 正则表达式：匹配文件类型
  7. class ：类组件

github地址

用原生js实现具有进度监听的文件上传预览组件

Demo演示

使用：

    • css代码：

     
 
 
 
      
  
  
  
  
    1. .xj-wrap {
      2. 
  
  
  
  
    2.             position: relative;
      3. 
  
  
  
  
    3.             display: inline-block;
      4. 
  
  
  
  
    4.             border: 1px dashed #888;
      5. 
  
  
  
  
    5.             width: 200px;
      6. 
  
  
  
  
    6.             height: 200px;
      7. 
  
  
  
  
    7.             border-radius: 6px;
      8. 
  
  
  
  
    8.             overflow: hidden;
      9. 
  
  
  
  
    9.         }
      10. 
  
  
  
  
    10.         .xj-wrap::before {
      11. 
  
  
  
  
    11.             content: '+';
      12. 
  
  
  
  
    12.             font-size: 36px;
      13. 
  
  
  
  
    13.             position: absolute;
      14. 
  
  
  
  
    14.             transform: translate(-50%, -50%);
      15. 
  
  
  
  
    15.             left: 50%;
      16. 
  
  
  
  
    16.             top: 50%;
      17. 
  
  
  
  
    17.             color: #ccc;
      18. 
  
  
  
  
    18.         }
      19. 
  
  
  
  
    19.         .xj-wrap .xj-pre-img {
      20. 
  
  
  
  
    20.             width: 100%;
      21. 
  
  
  
  
    21.             height: 100%;
      22. 
  
  
  
  
    22.             background-repeat: no-repeat;
      23. 
  
  
  
  
    23.             background-position: center center;
      24. 
  
  
  
  
    24.             background-size: 100%;
      25. 
  
  
  
  
    25.         }
      26. 
  
  
  
  
    26.         .xj-file {
      27. 
  
  
  
  
    27.             position: absolute;
      28. 
  
  
  
  
    28.             left: 0;
      29. 
  
  
  
  
    29.             right: 0;
      30. 
  
  
  
  
    30.             bottom: 0;
      31. 
  
  
  
  
    31.             top: 0;
      32. 
  
  
  
  
    32.             opacity: 0;
      33. 
  
  
  
  
    33.             cursor: pointer;
      34. 
  
  
  
  
    34.         }
      35.

    js代码：

     
 
 
 
      
  
  
  
  
    1. (function(win, doc){
      2. 
  
  
  
  
    2.     function xjFile(opt) {
      3. 
  
  
  
  
    3.         var defaultOption = {
      4. 
  
  
  
  
    4.             el: doc.body,
      5. 
  
  
  
  
    5.             accept: '*', // 格式按照'image/jpg,image/gif'传
      6. 
  
  
  
  
    6.             clsName: 'xj-wrap',
      7. 
  
  
  
  
    7.             beforeUpload: function(e) { console.log(e) },
      8. 
  
  
  
  
    8.             onProgress: function(e) { console.log(e) },
      9. 
  
  
  
  
    9.             onLoad: function(e) { console.log(e) },
      10. 
  
  
  
  
    10.             onError: function(e) { console.error('文件读取错误', e) }
      11. 
  
  
  
  
    11.         };
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.         // 获取dom
      14. 
  
  
  
  
    14.         if(opt.el) {
      15. 
  
  
  
  
    15.             opt.el = typeof opt.el === 'object' ? opt.el : document.querySelector(opt.el);
      16. 
  
  
  
  
    16.         }
      17. 
  
  
  
  
    17. 
  
  
  
  
    18.         this.opt = minix(defaultOption, opt);
      19. 
  
  
  
  
    19.         this.value = '';
      20. 
  
  
  
  
    20.         this.init();
      21. 
  
  
  
  
    21.     }
      22. 
  
  
  
  
    22. 
  
  
  
  
    23.     xjFile.prototype.init = function() {
      24. 
  
  
  
  
    24.         this.render();
      25. 
  
  
  
  
    25.         this.watch();
      26. 
  
  
  
  
    26.     }
      27. 
  
  
  
  
    27. 
  
  
  
  
    28.     xjFile.prototype.render = function() {
      29. 
  
  
  
  
    29.         var fragment = document.createDocumentFragment(),
      30. 
  
  
  
  
    30.             file = document.createElement('input'),
      31. 
  
  
  
  
    31.             imgBox = document.createElement('div');
      32. 
  
  
  
  
    32.         file.type = 'file';
      33. 
  
  
  
  
    33.         file.accept = this.opt.accept || '*';
      34. 
  
  
  
  
    34.         file.className = 'xj-file';
      35. 
  
  
  
  
    35.         imgBox.className = 'xj-pre-img';
      36. 
  
  
  
  
    36.         // 插入fragment
      37. 
  
  
  
  
    37.         fragment.appendChild(file);
      38. 
  
  
  
  
    38.         fragment.appendChild(imgBox);
      39. 
  
  
  
  
    39.         // 给包裹组件设置class
      40. 
  
  
  
  
    40.         this.opt.el.className = this.opt.clsName;
      41. 
  
  
  
  
    41.         this.opt.el.appendChild(fragment);
      42. 
  
  
  
  
    42.     }
      43. 
  
  
  
  
    43. 
  
  
  
  
    44.     xjFile.prototype.watch = function() {
      45. 
  
  
  
  
    45.         var ipt = this.opt.el.querySelector('.xj-file');
      46. 
  
  
  
  
    46.         var _this = this;
      47. 
  
  
  
  
    47.         ipt.addEventListener('change', (e) => {
      48. 
  
  
  
  
    48.             var file = ipt.files[0];
      49. 
  
  
  
  
    49. 
  
  
  
  
    50.             // 给组件赋值
      51. 
  
  
  
  
    51.             _this.value = file;
      52. 
  
  
  
  
    52. 
  
  
  
  
    53.             var fileReader = new FileReader();
      54. 
  
  
  
  
    54. 
  
  
  
  
    55.             // 读取文件开始时触发
      56. 
  
  
  
  
    56.             fileReader.onloadstart = function(e) {
      57. 
  
  
  
  
    57.                 if(_this.opt.accept !== '*' && _this.opt.accept.indexOf(file.type.toLowerCase()) === -1) {
      58. 
  
  
  
  
    58.                     fileReader.abort();
      59. 
  
  
  
  
    59.                     _this.opt.beforeUpload(file, e);
      60. 
  
  
  
  
    60.                     console.error('文件格式有误', file.type.toLowerCase());
      61. 
  
  
  
  
    61.                 }
      62. 
  
  
  
  
    62.             }
      63. 
  
  
  
  
    63. 
  
  
  
  
    64.             // 读取完成触发的事件
      65. 
  
  
  
  
    65.             fileReader.onload = (e) => {
      66. 
  
  
  
  
    66.                 var imgBox = this.opt.el.querySelector('.xj-pre-img');
      67. 
  
  
  
  
    67.                 if(isImage(file.type)) {
      68. 
  
  
  
  
    68.                     imgBox.innerHTML = '';
      69. 
  
  
  
  
    69.                     imgBox.style.backgroundImage = 'url(' + fileReader.result + ')';
      70. 
  
  
  
  
    70.                 } else {
      71. 
  
  
  
  
    71.                     imgBox.innerHTML = fileReader.result;
      72. 
  
  
  
  
    72.                 }
      73. 
  
  
  
  
    73.                 
      74. 
  
  
  
  
    74.                 imgBox.title = file.name;
      75. 
  
  
  
  
    75. 
  
  
  
  
    76.                 this.opt.onLoad(e);
      77. 
  
  
  
  
    77.             }
      78. 
  
  
  
  
    78. 
  
  
  
  
    79.             // 文件读取出错事件
      80. 
  
  
  
  
    80.             fileReader.onerror = (e) => {
      81. 
  
  
  
  
    81.                 this.opt.onError(e);
      82. 
  
  
  
  
    82.             }
      83. 
  
  
  
  
    83. 
  
  
  
  
    84.             // 文件读取进度事件
      85. 
  
  
  
  
    85.             fileReader.onprogress = (e) => {
      86. 
  
  
  
  
    86.                 this.opt.onProgress(e);
      87. 
  
  
  
  
    87.             }
      88. 
  
  
  
  
    88. 
  
  
  
  
    89.             isImage(file.type) ? fileReader.readAsDataURL(file) : fileReader.readAsText(file);
      90. 
  
  
  
  
    90.             
      91. 
  
  
  
  
    91.         }, false);
      92. 
  
  
  
  
    92.     }
      93. 
  
  
  
  
    93. 
  
  
  
  
    94.     // 清除ipt和组件的值，支持链式调用
      95. 
  
  
  
  
    95.     xjFile.prototype.clearFile = function() {
      96. 
  
  
  
  
    96.         this.opt.el.querySelector('.xj-file').value = '';
      97. 
  
  
  
  
    97.         this.value = '';
      98. 
  
  
  
  
    98.         return this
      99. 
  
  
  
  
    99.     }
      100. 
  
  
  
  
    100. 
  
  
  
  
    101.     // 简单对象混合
      102. 
  
  
  
  
    102.     function minix(source, target) {
      103. 
  
  
  
  
    103.         for(var key in target) {
      104. 
  
  
  
  
    104.             source[key] = target[key];
      105. 
  
  
  
  
    105.         }
      106. 
  
  
  
  
    106.         return source
      107. 
  
  
  
  
    107.     }
      108. 
  
  
  
  
    108. 
  
  
  
  
    109.     // 检测图片类型
      110. 
  
  
  
  
    110.     function isImage(type) {
      111. 
  
  
  
  
    111.         var reg = /(image\/jpeg|image\/jpg|image\/gif|image\/png)/gi;
      112. 
  
  
  
  
    112.         return reg.test(type)
      113. 
  
  
  
  
    113.     }
      114. 
  
  
  
  
    114. 
  
  
  
  
    115.     // 将方法挂载到window上
      116. 
  
  
  
  
    116.     win.xjFile = xjFile;
      117. 
  
  
  
  
    117. 
  
  
  
  
    118. })(window, document);
      119.

    class版(后期规划)

    class版的也很简单，大致框架如下，感兴趣的朋友可以实现一下呦～

     
 
 
 
      
  
  
  
  
    1. class XjFile {
      2. 
  
  
  
  
    2.     constructor(opt) {
      3. 
  
  
  
  
    3. 
  
  
  
  
    4.     }
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.     init() {
      7. 
  
  
  
  
    7. 
  
  
  
  
    8.     }
      9. 
  
  
  
  
    9. 
  
  
  
  
    10.     watch() {
      11. 
  
  
  
  
    11. 
  
  
  
  
    12.     }
      13. 
  
  
  
  
    13. 
  
  
  
  
    14.     render() {
      15. 
  
  
  
  
    15. 
  
  
  
  
    16.     }
      17. 
  
  
  
  
    17. 
  
  
  
  
    18.     clearFile() {
      19. 
  
  
  
  
    19. 
  
  
  
  
    20.     }
      21. 
  
  
  
  
    21. 
  
  
  
  
    22.     minix(source, target) {
      23. 
  
  
  
  
    23.         
      24. 
  
  
  
  
    24.     }
      25. 
  
  
  
  
    25. 
  
  
  
  
    26.     isImage(type) {
      27. 
  
  
  
  
    27.         
      28. 
  
  
  
  
    28.     }
      29. 
  
  
  
  
    29. }
      30.

    总结

    该组件仍有需要完善的地方，在后期使用中，会慢慢更新，优化，欢迎大家提出宝贵的建议。

    分享题目：前端进阶:原生JavaScript实现具有进度监听的文件上传预览组件
    分享URL：http://www.mswzjz.cn/qtweb/news8/510608.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    服务器托管知识

    分类信息网站

    响应式网站　　 　网站建设公司　　 　手机网站设计　　 　顺泽窗帘　　 　混凝土搅拌车　　 　贵阳联通机房　　 　营销型网站建设　　 　自适应网页设计　　 　网站seo优化　　 　成都app软件开发　　 　西部信息机房　　 　成都微信开发　　 　南充网站制作　　 　腾讯云香港虚拟主机　　 　成都封阳台　　 　自贡服务器托管　　 　广告品牌策划设计　　 　边坡柔性防护网　　 　云南护栏打桩机　　 　成都LED亮化工程