Beim Lesen von Dateien über die FileReader-Methode via HTML5 und JavaScript kann es vorkommen, dass die zu lesende und auszugebende Datei Umlaute enthält und die Datei ANSI kodiert ist. Mit folgendem kurzen Code für eine HTML-Datei und einem Browser mit HTML5-Support wird die Darstellung korrekt durchgeführt.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
</head>
<body>

<input type="file" id="files" name="files[]" />
<p>
<output id="filecontent"></output>



    function handleFileSelect(evt) {

        var files = evt.target.files;
        file = files[0];

    var fileReader = new FileReader();
    
    fileReader.addEventListener("load", function(event) {

        var textFile = event.target;
        fileContent = textFile.result;
        lines = fileContent.split('\n');
        
        document.getElementById('filecontent').innerHTML = '' + lines.join('
') + '';

        });
    
    fileReader.readAsText(file, 'windows-1252');
    
    }
  
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
  


</body>
</html>

Kurzinfo zum Code:

  • Lesen einer ANSI kodierten Datei 
    fileReader.readAsText(file, 'windows-1252');
  • Der Code 
    fileReader.addEventListener

    wird erst aktiv, wenn die Datei vollständig gelesen wurde

  • Unterstützung der Kodierung für deutsche Zeichen aktivieren 
    <html lang="de">
...
<meta charset="utf-8"/>

Sofern zusätzlich Dateiinformationen benötigt werden:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
</head>
<body>

<input type="file" id="files" name="files[]" />

<output id="fileinfo"></output>
<output id="filecontent"></output>



    function handleFileSelect(evt) {

        var files = evt.target.files;
        file = files[0];

        fileInfo = 'file name: ' + escape(file.name) + ', file type: ' + file.type + ', file size: ' + file.size + ' bytes, last modified: ' + file.lastModifiedDate.toLocaleDateString();
        
    var fileReader = new FileReader();
    
    fileReader.addEventListener("load", function(event) {

        var textFile = event.target;
        fileContent = textFile.result;
        lines = fileContent.split('\n');
        
        document.getElementById('filecontent').innerHTML = '' + lines.join('
') + '';

        });
    
    fileReader.readAsText(file, 'windows-1252');
    
    document.getElementById('fileinfo').innerHTML = '
    ' + fileInfo + '
';

    }
  
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
  


</body>
</html>

Beispiel-Ausgabe:

htmlcode01