Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
180 views
in Technique[技术] by (71.8m points)

javascript - HTML5 File api, reading in an xml/text file and displaying it on the page?

I have tried using the below code modified from http://www.html5rocks.com/tutorials/file/dndfiles/ to read in a text or xml file and display the contents below.

<!DOCTYPE html> 
<html> 
<head> 
    <title>reading xml</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head>
<body>
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>

    <script>
      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 = ['<p>',e.target.result,'</p>'].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);
    </script>
</body>

reader.readAsDataText(f,UTF-8); Does not work

reader.readAsDataURL(f); Displays the file in Base64

How can I get a text file to be displayed on the page?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You need to pass in the encoding as a string; put quotes around the UTF-8. Also, it's readAsText, not readAsDataText:

reader.readAsText(f,"UTF-8");

Or you can just leave the encoding off entirely, in which case it will try to auto-detect UTF-16BE or LE, and if it's not one of those, it will just use UTF-8 by default.

reader.readAsText(f);

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...