JavaScript 实时上传和解析文件

Question

是否可以使用

上传文件

的方式上传文件？

<input type="file">

如何将csv（或其他类型）文件解析为JavaScript数组而不在服务器端保存文件？是否有任何插件可以建议使用？

不使用后端，这种做法是否可行？

谢谢。

- Fyodor Khruschov

---

如果您是在谈论客户端读取文件内容，那么请使用FileReader：https://developer.mozilla.org/en-US/docs/Web/API/FileReader。如果不是，请澄清您的问题。 - Ray Nicholus

这正是我正在寻找的。这是我的问题的实现：http://rohitrox.github.io/js_csv/ - Fyodor Khruschov

然后，您需要模拟的代码可以在https://github.com/RohitRox/js_csv/blob/master/index.html#L100找到。 - Ray Nicholus

Answer 1

使用JS代码在客户端上传CSV文件并解析它，然后将其绘制到控制台中

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"/>

- Aman Kumar

---

如果需要设置编码方式，也可以使用reader.readAsText。 - Victor Kwok