使用FileReader在瀏覽器讀取預覽文件(image和txt)


如標題,之前在某個地方看到因為有Blob的存在,理論上可以在瀏覽器上查看所有格式的文件.自己想着試試現在暫時只能夠查看圖片和預覽txt文件.其他的比如doc,docx格式的文件查看的時候是亂碼

如圖:可以多選照片查看,可以查看txt文件

不說多了,主要是利用filereader讀取blob轉成base64或者直接讀取文本然后展示.代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <input type="file" id="file1" multiple="multiple">
    <div id="showArea" style="width: 500px;height: 500px;border: #0066CC 1px solid;">
        
    </div>
    <textarea rows="30" cols="80" id="textarea">
        
    </textarea>
    </body>
  <script type="text/javascript">
    /* ArrayBuffer, Blob對象(二進制文件) 和 字符串, base64(ASCII碼) 之間的相互轉換/單向轉換, */
    
    // 文件讀取器 FileReader
    // FileReader 只接受 File 或 Blob 類型的數據(事實上 File 也 Blob 的一種)
    // 1.Blob類型
    const filereader = new FileReader();
    const blob = new Blob(['hello file-reader'], { type: 'text/plain'});    
    filereader.onload = e => {    
        console.log(e.target.result); // 輸出 data:text/plain;base64,aGVsbG8gZmlsZS1yZWFkZXI=    
        var txt = new File();
    }    
    // filereader.readAsDataURL(blob);
    // 2. File類型
    let file1DOM = document.querySelector('#file1');
    file1DOM.onchange = function(){
      console.log(this.files)
      let file1 = this.value
      var fileReaders = []
      for(var i = 0;i<this.files.length;i++){
        console.log(this.files[i].type)
        fileReaders[i] = new FileReader();
        var fileType = this.files[i].type.split('/')[0]
        if(fileType == 'image'){
            fileReaders[i].readAsDataURL(this.files[i])
            fileReaders[i].onload = function(e) {
              var image = new Image();
              image.setAttribute('src',e.target.result)
              image.setAttribute('width',200)
              image.onload = function() {
                document.querySelector('#showArea').appendChild(this)
              }
            }
        } else if(fileType == 'text'){
          fileReaders[i].readAsText(this.files[i])
          fileReaders[i].onload = function(e){
            document.querySelector('#textarea').value =  e.target.result
          }
        }
      }
    }
  </script>
</html>

試過利用filereader的readastext()讀取docx,但是讀取出來格式是application/vnd.openxmlformats-officedocument.wordprocessingml.document,讀取出來也是亂碼.大概是編碼問題.試了試別的編碼方式GB2312,GBK沒有用,都是亂碼.先放放,有空了再看看


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com