本文介绍了使用FileReader读取文本文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经写了下面的代码，试图读取.txt文件的内容。
<！DOCTYPE HTML>
< html>
< input type =fileid =filesname =file/>
< div id =containerstyle =height：500px; min-width：500px>< / div>
< script>
函数handleFileSelect（evt）
{
var files = evt.target.files; // FileList对象
//循环FileList并以缩略图形式呈现图像文件。
for（var i = 0，f; f = files [i]; i ++）
{
var reader = new FileReader（）;
reader.onload =（function（theFile）
{
var contents = theFile.target.result;
var lines = contents.split（'\\\
'）;
}）（f）;
reader.readAsText（f）;
$ b $ document.getElementById（'files'）。addEventListener（'change'，handleFileSelect，false）;
< / script>
< / html>
使用firebug我在 var contents = theFile.target.result ; 但没有任何东西被返回。任何人都可以发现有什么问题吗？
谢谢
解决方案
onload with closure）：
函数handleFileSelect（evt）
{
var files = evt.target。文件; // FileList对象
//循环FileList并以缩略图形式呈现图像文件。
for（var i = 0，f; f = files [i]; i ++）
{
var reader = new FileReader（）;
reader.onload =（函数（读取器）
{
返回函数（）
{
var contents = reader.result;
var lines = contents .split（'\\\
'）;
//////
document.getElementById（'container'）。innerHTML = contents;
}
}）（reader ）;
reader.readAsText（f）;
code $
或者（没有关闭）：$ / $>
函数handleFileSelect（evt）
{
var files = evt.target.files; // FileList对象
//循环FileList并以缩略图形式呈现图像文件。
for（var i = 0，f; f = files [i]; i ++）
{
var reader = new FileReader（）;
reader.onload = function（event）
{
//注意：event.target指向FileReader
var contents = event.target.result;
var lines = contents.split（'\\\
'）;
//////
document.getElementById（'container'）。innerHTML = contents;
};
reader.readAsText（f）;
}
}
I've written the following code in an attempt to read the contents of a .txt file
<!DOCTYPE html>
<html>
<input type="file" id="files" name="file" />
<div id="container" style="height: 500px; min-width: 500px"></div>
<script>
function handleFileSelect(evt)
{
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++)
{
var reader = new FileReader();
reader.onload = (function(theFile)
{
var contents = theFile.target.result;
var lines = contents.split('\n');
})(f);
reader.readAsText(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</html>
Using firebug I set a break on var contents = theFile.target.result; but nothing is being returned. Can anyone spot what's wrong?
Thank you
解决方案 Try (onload with closure):
function handleFileSelect(evt)
{
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++)
{
var reader = new FileReader();
reader.onload = (function(reader)
{
return function()
{
var contents = reader.result;
var lines = contents.split('\n');
//////
document.getElementById('container').innerHTML=contents;
}
})(reader);
reader.readAsText(f);
}
}
Or (without closure):
function handleFileSelect(evt)
{
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++)
{
var reader = new FileReader();
reader.onload = function(event)
{
// NOTE: event.target point to FileReader
var contents = event.target.result;
var lines = contents.split('\n');
//////
document.getElementById('container').innerHTML=contents;
};
reader.readAsText(f);
}
}
这篇关于使用FileReader读取文本文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！