Javascript上传和动态解析文件

Javascript upload and parse file on fly

本文关键字:文件 动态 Javascript      更新时间:2023-09-26

是否可以使用

<input type="file">

然后将其解析为 JavaScript 数组而不将文件保存在服务器端?您能否建议任何插件使用 csv(或任何其他(文件类型执行此操作。

在不使用后端的情况下以这种方式做事是个好主意吗?

谢谢。

用于

上传csv的JS代码,并在客户端解析它,然后将它们绘制到控制台中

function uploadDealcsv () {}; 
  /*------ Method for read uploded csv file ------*/
  uploadDealcsv.prototype.getCsv = function(e) {
       
      let input = document.getElementById('dealCsv');
      input.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            var myFile = this.files[0];
            var reader = new FileReader();
            
            reader.addEventListener('load', function (e) {
                let csvdata = e.target.result; 
                parseCsv.getParsecsvdata(csvdata); // calling function for parse csv data 
            });
            
            reader.readAsBinaryString(myFile);
        }
      });
    }
    /*------- Method for parse csv data and display --------------*/
    uploadDealcsv.prototype.getParsecsvdata = function(data) {
        let parsedata = [];
        let newLinebrk = data.split("'n");
        for(let i = 0; i < newLinebrk.length; i++) {
            parsedata.push(newLinebrk[i].split(","))
        }
        console.table(parsedata);
    }
  
  var parseCsv = new uploadDealcsv();
  parseCsv.getCsv();
<input type="file" id="dealCsv"/>