Reading file txt

Hi, I have these 3 codes That read txt files

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
    <br>
    <output id="files"></output>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#upload").bind("click", function () {
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileUpload").val().toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var table = $("<table />");
                    var rows = e.target.result.split("\n");
                    for (var i = 0; i < rows.length; i++) {
                        var row = $("<tr />");
                        var cells = rows[i].split(".");
                        for (var j = 0; j < cells.length; j++) {
                            var cell = $("<td />");
                            cell.html(cells[j]);
                            row.append(cell);
                        }
                        table.append(row);
                    }
                    $("#dvCSV").html('');
                    $("#dvCSV").append(table);
                }
                reader.readAsText($("#fileUpload")[0].files[0]);
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid CSV file.");
        }
    });
});
</script>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<hr />
<div id="dvCSV">
</div>
 
    </body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo - CSV-to-Table</title>
</head>
<body>
  <div id="inputs" class="clearfix">
    <input type="file" id="files" name="files[]" multiple />
  </div>
  <hr />
  <output id="list">
  </output>
  <hr />
  <table id="contents" style="width:100%; height:400px;" border>
  </table>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://evanplaice.github.io/jquery-csv/src/jquery.csv.min.js"></script>
  <script>
    $(document).ready(function() {
      if(isAPIAvailable()) {
        $('#files').bind('change', handleFileSelect);
      }
    });
    function isAPIAvailable() {
      // Check for the various File API support.
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
        return true;
      } else {
        // source: File API availability - http://caniuse.com/#feat=fileapi
        // source: <output> availability - http://html5doctor.com/the-output-element/
        document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
        // 6.0 File API & 13.0 <output>
        document.writeln(' - Google Chrome: 13.0 or later<br />');
        // 3.6 File API & 6.0 <output>
        document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
        // 10.0 File API & 10.0 <output>
        document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
        // ? File API & 5.1 <output>
        document.writeln(' - Safari: Not supported<br />');
        // ? File API & 9.2 <output>
        document.writeln(' - Opera: Not supported');
        return false;
      }
    }
    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var file = files[0];
      // read the file metadata
      var output = ''
          output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
          output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
          output += ' - FileSize: ' + file.size + ' bytes<br />\n';
          output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';
      // read the file contents
      printTable(file);
      // post the results
      $('#list').append(output);
    }
    function printTable(file) {
      var reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function(event){
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);
        var html = '';
        for(var row in data) {
          html += '<tr>\r\n';
          for(var item in data[row]) {
            html += '<td>' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
        $('#contents').html(html);
      };
      reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
    }
  </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <title> by bruiz</title>
  
</head>
<body>
 <script>
var leitorDeCSV = new FileReader();
window.onload = function init() {
    leitorDeCSV.onload = leCSV;
}
function pegaCSV(inputFile) {
    var file = inputFile.files[0];
     leitorDeCSV.readAsText(file);
}
function leCSV(evt) {
    var fileArr = evt.target.result.split('\n');
    var strDiv = '<table>';
    
    for (var i=0; i<fileArr.length; i++) {
        strDiv += '<tr>';
        var fileLine = fileArr[i].split('.');
            for (var j=0; j<fileLine.length; j++) {
                strDiv += '<td>'+fileLine[j].trim()+'</td>';
            }
        strDiv += '</tr>';
    }
    
    strDiv += '</table>';
    
    var CSVsaida = document.getElementById('CSVsaida');
        CSVsaida.innerHTML = strDiv;
}
</script>
</head>
    <input type="file" id="inputCSV" onChange="pegaCSV(this)">
    <div id="CSVsaida"></div>
</body>
</html>

These 3 code work perfectly, I want to execute the select file executing automatic file in onload or any other form since it automatically runs in index.html and already open the file data.txt,
Data.txt file and the following
1
2
3
The variable var1 = first line of the data.txt file
Var2 second line of file data.txt
Var3 third line of data.txt file

How could I do that ???

Why do you want each line as a separate variable?

You already have each line as an item in the fileArr that is much more easily consumed than separate named variables. fileArr[0] fileArr[1] etc.

How do I open file data.txt with the file path, c:\test\data.txt???

From “c:/” ?

If you mean your computer instead of a website (live or localhost) then you are going to have security permission problems. At least for browser JavaScript.

And read data.txt file where the index.html and other site files are hosted in the same location

I think I missed your question.

You cannot read from a file without the user having select it in an <input>
Your first example is the only way.

I do not understand the 3 examples I have to select the file to open it, I want to not need to select file, open file by name data.txt understood, open file by file path without having to select how can I do ???

^^ You cannot read from a file without the user having select it in an <input>

Browsers prevent you from accessing the filesystem without the users consent by selecting a file.

When I opened google chrome I want to read the file data.txt how could I do it would have some code to send me ???

To me it’s a lot easier to open text files in a text editor.

But if you want to open them in your Chrome browser (this is for Windows, but I imagine other OS have similar)

  • navigate to the text file
  • right click
  • open with
  • navigate to your Chrome.exe file

Is not this I want to run JavaScript in Google Chrome, the javascript function will automatically read the data.txt file, the above 3 JavaScript example read the file however I have to select the file that will be read, need to read through the JavaScript automatic data.txt Without always having to select the file

This works for me

example-txt-file.txt

Just a simple txt file with some text. 

This file is for testing with the xhr-test.html file.

xhr-test.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>XHR Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>XHR Test</h1>
<div>
  <button id="request_button">Request File</button>
</div>
<div id="response_div"></div>
<script type="application/javascript">
var request_button = document.getElementById("request_button");
var filename = "example-txt-file.txt";

request_button.addEventListener('click', function(evt) {
  request_file(filename);
});

function request_file(filename) {
  var request_obj = new XMLHttpRequest();
  request_obj.responseType = 'text';
  request_obj.open("GET", filename);
  request_obj.send();
  request_obj.onload = function () {
    display_response(request_obj.responseText);
  };
}

function display_response(content) {
  var response_div = document.getElementById("response_div");
  response_div.textContent = content;
}
</script>
</body>
</html>

Both files in the same folder on my localhost server

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.