title: HTML5 File api, reading in an xml/text file and displaying it on the page?
body: <p>I have tried using the below code modified from <a href="http://www.html5rocks.com/tutorials/file/dndfiles/" rel="noreferrer">http://www.html5rocks.com/tutorials/file/dndfiles/</a> to read in a text or xml file and display the contents below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
      &lt;title&gt;reading xml&lt;/title&gt; 
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="file" id="files" name="files[]" multiple /&gt;
      &lt;output id="list"&gt;&lt;/output&gt;
  
      &lt;script&gt;
        function handleFileSelect(evt) {
          var files = evt.target.files; // FileList object
  
          // Loop through the FileList
          for (var i = 0, f; f = files[i]; i++) {
  
            var reader = new FileReader();
  
            // Closure to capture the file information.
            reader.onload = (function(theFile) {
              return function(e) {
                // Print the contents of the file
                var span = document.createElement('span');                    
                span.innerHTML = ['&lt;p&gt;',e.target.result,'&lt;/p&gt;'].join('');
                document.getElementById('list').insertBefore(span, null);
              };
            })(f);
  
            // Read in the file
            //reader.readAsDataText(f,UTF-8);
            reader.readAsDataURL(f);
          }
        }
  
        document.getElementById('files').addEventListener('change', handleFileSelect, false);
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>reader.readAsDataText(f,UTF-8); Does not work</p>
  
  <p>reader.readAsDataURL(f); Displays the file in Base64</p>
  
  <p>How can I get a text file to be displayed on the page?</p>