1、讀取計(jì)算機(jī)中的文件

直接 file 類型獲取

 <input type="file">

文件上傳.png

2、獲取讀取文件的基本信息

html5在DOM的文件輸入元素中添加了 files集合，一個(gè) file對(duì)應(yīng)一個(gè)文件。每個(gè)File對(duì)象都有下列只讀屬性：

• name： 本地文件系統(tǒng)中的文件名
• size： 文件的字節(jié)大小
• type： 文件的MIME類型
• lastModifedDate: 字符串，上次被修改的時(shí)間 （ 兼容性不強(qiáng)）
  ??：

<input type="file" id='file'>
<script>
  const  file = document.getElementById('file')
  file.addEventListener('change', function(e) {
    console.log(e.target.files)
  },false)
</script>

獲取文件的信息.png

3、讀取文件：FileReader類型

FileReader類型實(shí)現(xiàn)的是一種異步文件讀取機(jī)制。類似于XMLHttpRequest, 區(qū)別是讀取的是文件系統(tǒng)， 而不是遠(yuǎn)程服務(wù)器。FileReader類型有4個(gè)API：

• readAsText(file, encoding) : 純文本形式讀取
• readAsDataURL(file) : 讀取文件并將文件以數(shù)據(jù)URI 的形式保存
• readAsBinaryString(file): 讀取文件并將一個(gè)字符串進(jìn)行保存， 字符串中的每個(gè)字符表示一字節(jié)
• readAsArrayBuffer(file): 讀取文件并將一個(gè)包含文件內(nèi)容的ArrayBuffer保存

FileReader類型有3個(gè)事件：

• progress： 每50ms觸發(fā)一次progress
• error： code碼- 1：未找到文件;2：安全性錯(cuò)誤;3：讀取中斷;4：文件不可讀;5：編碼錯(cuò)誤
• load: 成功加載觸發(fā)load;觸發(fā)error, 不會(huì)發(fā)生load事件;

FileReader類型有2個(gè)屬性：

• error
• result

FileReader 可以從Blob類型數(shù)據(jù)中讀取數(shù)據(jù)：

const  reader = new FileReader()
reader.readAsText(blob)

??：

<input type="file" id='file'>
<div id="progress"></div>
<div id="result"></div>

<script>
  const file = document.getElementById('file')
  file.addEventListener('change', function(e) {
    const reader = new FileReader()
    const files = e.target.files
    let type = 'default'

    let result = document.getElementById('result')
    let progress = document.getElementById('progress')

    if (/image/.test(files[0].type)) {
       reader.readAsDataURL(files[0])
       type = 'image'
    } else {
       reader.readAsText(files[0])
       type = 'text'
    }

    reader.onload = function() {
      let html = ''
      switch(type) {
        case 'image': 
          html = `<img src='${reader.result}' alt='ss'/>`
          break;
        case 'text':
          html = reader.result;
          break;
      } 
      result.innerHTML =  html
    }
    reader.onerror = function() {
       result.innerHTML = reader.error.code
    }
    
    reader.onprogress = function(event) {
      console.log(e)
       if(event.lengthComputable) {
        progress = `${event.loaded} / ${event.total}`
       }
    }
  },false)

4、讀取部分內(nèi)容

只讀取部分內(nèi)容， 不讀取全部?jī)?nèi)容，比如只讀取 文件頭部信息。 此時(shí)需使用 slice 方法。入?yún)槠鹗甲止?jié) 和要讀取的字節(jié)數(shù)， 返回Blob實(shí)例。

<input type="file" id='file'>
<div id="result"></div>
<script>
  const file = document.getElementById('file')

  file.addEventListener('change', function(e) {
    const reader = new FileReader()
    const files = e.target.files
    const result = document.getElementById('result')
    const blob = files[0].slice(0,32)

    if(blob){
      reader.readAsText(blob)
      reader.onload = function() {
        result.innerHTML = reader.result
      }
    }
  },false)
</script>

image.png

5、對(duì)象URL

對(duì)象URL 也稱為blob URL，指的是 引用保存在File 或Blob中數(shù)據(jù)的URL。
好處： 不必把文件內(nèi)容讀取到JavaScript中而直接使用文件內(nèi)容；
使用方式： 在需要使用文件內(nèi)容的地方 使用對(duì)象URL
創(chuàng)建： window.URL.createObjectURL(), 入?yún)閎lob or file 對(duì)象 ； 返回值為字符串即一塊內(nèi)存的地址

<input type="file" id='file'>
<div id="result"></div>

<script>
  const file = document.getElementById('file')

  file.addEventListener('change', function(e) {
    const reader = new FileReader()
    const files = e.target.files
    const result = document.getElementById('result')
    const url = window.URL.createObjectURL(files[0])

    if(url) {
        if (/image/.test(files[0].type)) {
          result.innerHTML = `<img src='${url}' />`
        }  
    }
  },false)
</script>

image.png

6、總結(jié)

我將上面的內(nèi)容總結(jié)成思維導(dǎo)圖了， 記得更清楚哈~~

File.png

hi~~~ 今天開心了沒~~