Question

我正在尝试上传文件并读取其内容，然后将内容输出到表中。只要有＆gt;信息需要放在新行上。字符串中的char。

我有一个问题包围着如何创造一个新的＆＃39; tr＆＃39;然后将数据添加到单元格＆＃39; td＆＃39;在那一行。

我被卡在<tr>和<td>上，并使用文件中的内容动态添加它们。我相信我可以使用正则表达式来寻找＆gt; char，但这并不是我需要帮助的。我正在努力解决在＆gt;之后我如何获取信息的问题。 char并将其添加到表中的新行。

更新：好的，所以我仍然没有完全按照我要做的工作。我正在上传文件，阅读它，并将信息存储为对象。但是，我只能为一个实例执行此操作。当我上传文本文件时，文件中会有多个DNA序列。每个序列都有一个这样的sequence_id：

9013e1 ACAAGATGCCATTGTCCCCCGGCCTCCTGCTGCTGCTGCTCTCCGGGGCCACGGCCACCGCTGCCCTGCC CCTGGAGGGTGGCCCCACCGGCCGAGACAGCGAGCATATGCAGGAAGCGGCAGGAATAAGGAAAAGCAGC CTCCTGACTTTCCTCGCTTGGTGGTTTGAGTGGACCTCCCAGGCCAGTGCCGGGCCCCTCATAGGAGAGG AAGCTCGGGAGGTGGCCAGGCGGCAGGAAGGCGCACCCCCCCAGCAATCCGCGCGCCGGGACAGAATGCC CTGCAGGAACTTCTTCTGGAAGACCTTCTCCTCCTGCAAATAAAACCTCACCCATGAATGCTCACGCAAG TTTAATTACAGACCTGAA

所以，我正在尝试阅读文件，查找所有序列ID，然后查找序列，我想要一个可编辑的前导和尾随修饰，如下所示：

var objArray = [
    {
        'id':  '>9013e1',
        'sequence': 'ACAAGATGCCATTGTCCCCCGGCCT...',
        'lead_trim': //get the value from a input from the user,
        'trail_trim': //same as above
    },
    {
        //another obj like above
    }
]

序列还需要在每60个字符后插入一个换行符。一旦我正确处理了文本文件中的数据，我就需要将数据输出到我在原始帖子中所述的表格中。我遇到的问题是我只能在我的objArray中存储一个obj的信息。

以下是我的代码......

function scanForSequences(event) {
    //Get the file from HTML input tag
    var file = event.target.files[0];
    var output = document.getElementById('table');

    if(file) {
        var sequenceArray = [];
        var objArray = [];
        var obj = {};
        var str = '';
        var subStr = '';
        //Create a new file reader
        var reader = new FileReader();
        //When the file reader loads
        reader.onload = function(evt) {
            //Add the contents of file to variable contents
            var contentsByLine = evt.target.result.split('\n');
            //Alert user the file upload has succeeded
            alert('File ' + file.name + ' has been uploaded!');

            for(var i = 0; i < contentsByLine.length; i++){
                if(contentsByLine[i].charAt(i) == '>'){
                    obj['id'] = contentsByLine[i];
                }else{
                    sequenceArray.push(contentsByLine[i]);
                    str = sequenceArray.toString();
                    subStr += str.substring(0, 60) + '\n';
                    str = str.substring(60);
                    obj['sequence'] = subStr;
                    obj['lead_trim'] = 0;
                    obj['trail_trim'] = 0;
                }
                objArray.push(obj);
                console.log(objArray);
            }

        }
        reader.readAsText(file);
    } else {
        alert('Failed to upload file!');
    }
    console.log(obj);
}

document.getElementById('fileItem').addEventListener('change', scanForSequences, false);

Answer 1

请在下面的小提琴中找到我提出的解决方案：

https://jsfiddle.net/w6jbuqfy/

以下是对正在发生的事情的解释：

首先我们输入文件类型：

<input id="input" type="file">

我们然后附加一个事件监听器，以便在用户选择文件后执行一个函数

var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFile, false);

在handleFile函数中，我们使用FileReader来读取文件。

var fileList = this.files;
var file = fileList[0];
var fr = new FileReader();
fr.readAsText(file);

现在fileReaders本质上是异步的，这里我有一个简单的间隔，每100ms检查一次文件读取器的状态。

  var checkReadyId = setInterval(function(){
    if(fr.readyState === 2){ //done
        window.clearInterval(checkReadyId);
      addFileDataToResults(fr.result);
    } else{
        console.log('not done yet');
    }
  }, 100);

FileReaders在readyState为2时完成读取。所以我们检查一下，一旦完成，我们就可以从FileReader.result访问结果了。当我们在上面作为文本阅读时，我们将得到一个字符串。然后我们将它传递给我们的addFileDataToResults函数。

  function addFileDataToResults(fileAsString){
    var resultsDiv = document.getElementById('results');
    var tr = document.createElement('tr');
    var td = document.createElement('td');

    var linesInFile = fileAsString.split('\n');
    console.log(linesInFile);

    td.textContent = linesInFile[0];
    tr.appendChild(td);
    resultsDiv.appendChild(tr);
  }

这里发生的是我们抓取resultsDiv，它是我们HTML中的真实节点。然后我们使用createElement创建虚拟节点并将数据放入其中。在这种情况下，我们只是将第一行的文本放入我们的文件中。完成创建虚拟节点后，我们将appendChild用于真实节点，将虚拟节点转换为真实节点，您可以在html中看到它。

希望这会有所帮助：）

JavaScript FileReader和动态表

1 个答案: