HTML5 File api, reading in an xml/text file and displaying it on the page?
Question
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?
2 answers
solution1
12 ACCPTED 2011-04-21 12:58:54
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);
solution2
0 2014-03-03 16:02:15
This can be done quite easily using javascript XMLHttpRequest() class:
function FileHelper()
{}
{
FileHelper.readStringFromFileAtPath = function(pathOfFileToReadFrom)
{
var request = new XMLHttpRequest();
request.open("GET", pathOfFileToReadFrom, false);
request.send(null);
var returnValue = request.responseText;
return returnValue;
}
}
...
var text = FileHelper.readStringFromFileAtPath ( "mytext.txt" );
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.