教你3分鐘利用原生js實現(xiàn)有進度監(jiān)聽的文件上傳預(yù)覽組件-創(chuàng)新互聯(lián)

前言

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、大石橋網(wǎng)絡(luò)推廣、小程序開發(fā)、大石橋網(wǎng)絡(luò)營銷、大石橋企業(yè)策劃、大石橋品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供大石橋建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn

本文主要介紹如何使用原生js，通過面向?qū)ο蟮姆绞綄崿F(xiàn)一個文件上傳預(yù)覽的組件，該組件利用FileReader來實現(xiàn)文件在前端的解析，預(yù)覽，讀取進度等功能，并對外暴露相應(yīng)api來實現(xiàn)用戶自定義的需求，比如文件上傳，進度監(jiān)聽，自定義樣式，讀取成功回調(diào)等。

組件設(shè)計架構(gòu)如下：

涉及的核心知識點如下：

1. 閉包：減少變量污染，縮短變量查找范圍
2. 自執(zhí)行函數(shù)
3. file API：對文件進行讀取，解析，監(jiān)控文件事件
4. DocumentFragment API：主要用來優(yōu)化dom操作
5. minix ：用來實現(xiàn)對象混合
6. 正則表達式：匹配文件類型
7. class ：類組件

github地址

用原生js實現(xiàn)具有進度監(jiān)聽的文件上傳預(yù)覽組件 （本地下載）

Demo演示

使用：

<div id="test"></div>
<script src="./js/xjFile.js"></script>
<script>
 new xjFile({
  el: '#test', // 不填則直接默認掛在body上
  accept: 'image/png', // 可選
  clsName: 'xj-wrap', // 可選
  beforeUpload: function(e) { console.log(e) }, // 可選
  onProgress: function(e) { console.log(e) }, // 可選
  onLoad: function(e) { console.log(e) }, // 可選
  onError: function(e) { console.error('文件讀取錯誤', e) } // 可選
 });
</script>

文章名稱：教你3分鐘利用原生js實現(xiàn)有進度監(jiān)聽的文件上傳預(yù)覽組件-創(chuàng)新互聯(lián)
本文地址：http://muchs.cn/article48/dejdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)頁設(shè)計公司、做網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站排名、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)