fileRead实现import csv功能

最新推荐文章于 2022-12-29 11:53:39 发布

兰��

最新推荐文章于 2022-12-29 11:53:39 发布

阅读量310

点赞数

分类专栏： js 文章标签： javascript html5 jquery 前端

本文链接：https://blog.csdn.net/qq_45222993/article/details/106653221

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html代码：

 <label 
 class="btn-submit" 
 id="import_csv_span"  
 for="csv-file-input" 
 style="display:inline-block">
 <span class="btn-txt">Import CSV</span> 
 </label>
 <input 
 type="file" 
 class="csv-file-input" 
 id="csv-file-input">

分析html代码：主要是lable和input,

.csv-file-input {
    position: absolute;
    left: 0px;
    top: 6px;
    opacity: 0;
    width: 100%;
}

事件：
events:{ "change #csv-file-input": "importCsv"}
事件函数：
 getFiles: function (files, callback) {
    var fileType = $("#csv-file-input").val().split(".");
    if ((fileType[fileType.length - 1]) === "csv" || (fileType[fileType.length - 1]) === "CSV") {
      var reader = new FileReader();
      reader.readAsText(files[0], "UTF-8");
      reader.onload = function (evt) {
        var fileString = evt.target.result;
        var thead = fileString.split("\n")[0].split(",");
        var fileSp = fileString.split("\n");
        for (var i = 1; i < fileString.split("\n").length - 1; i++) {
          var value;
          var aclData = {};
          for (var j = 0; j < thead.length; j++) {
            value = fileSp[i].split(",")[j];
            aclData[thead[j]] = value;
          }
          callback(aclData);
        }
      };
    }

  },
  importCsv: function (e) {
    var _this = this;
    var files = e.target.files;
    this.getFiles(files, function (aclData) {
      _this.collection.add(aclData);
      _this.collection.trigger("change");
    });
  },