Javascript HTML5 文件 api，读取 xml/text 文件并将其显示在页面上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5744064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 File api, reading in an xml/text file and displaying it on the page?
提问by Sycren
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.
我尝试使用从http://www.html5rocks.com/tutorials/file/dndfiles/修改的以下代码来读取文本或 xml 文件并显示下面的内容。
<!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.readAsDataText(f,UTF-8); 不起作用
reader.readAsDataURL(f); Displays the file in Base64
reader.readAsDataURL(f); 以 Base64 格式显示文件
How can I get a text file to be displayed on the page?
如何让文本文件显示在页面上？
回答by Brian Campbell
You need to pass in the encoding as a string; put quotes around the UTF-8. Also, it's readAsText, not readAsDataText:
您需要将编码作为字符串传入；在UTF-8.周围加上引号。此外，它readAsText不是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.
或者，您可以完全关闭编码，在这种情况下，它会尝试自动检测 UTF-16BE 或 LE，如果不是其中之一，则默认情况下它只会使用 UTF-8。
reader.readAsText(f);
回答by user3375451
This can be done quite easily using javascript XMLHttpRequest()class:
这可以使用 javascriptXMLHttpRequest()类轻松完成：
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" );
