我使用JS FileReader。我想在文件读取操作后得到结果,并处理这些数据。FileReader是异步的,我不知道什么时候result准备好了。如何正确地完成这项工作?
$(document).ready(function(){
$('#file_input').on('change', function(e){
var res = readFile(this.files[0]);
//my some manipulate with res
$('#output_field').text(res);
});
});
function readFile(file){
var reader = new FileReader(),
result = 'empty';
reader.onload = function(e)
{
result = e.target.result;
};
reader.readAsText(file);
//waiting until result is empty?
return result;
}
是“空”的节目。
如何等待"result“为空?另一种方式?
发布于 2012-08-06 22:18:46
读取操作是异步进行的。您需要提供一个自定义的onload
回调,该回调定义读取完成后应该发生的事情:
$(document).ready(function(){
$('#file_input').on('change', function(e){
readFile(this.files[0], function(e) {
// use result in callback...
$('#output_field').text(e.target.result);
});
});
});
function readFile(file, onLoadCallback){
var reader = new FileReader();
reader.onload = onLoadCallback;
reader.readAsText(file);
}
(请参阅Fiddle。)
请注意,readFile
不返回值。取而代之的是,它接受一个回调函数,该函数将在读取完成时触发。$('#output_field').text
操作被移到回调函数中。这确保该操作直到读取器的onload
回调触发时才会运行,此时e.target.result
将被填满。
使用回调进行编程一开始有点困难,但对于实现高级功能来说,这是绝对必要的。
发布于 2018-04-28 05:58:54
使用Promise包装FileReader,然后使用await
获得结果:
https://blog.shovonhasan.com/using-promises-with-filereader/
发布于 2012-08-06 22:12:59
下面是javascript:
$(document).ready(function() {
$('#file_input').on('change', function(e) {
function updateProgress(evt) {
if (evt.lengthComputable) {
// evt.loaded and evt.total are ProgressEvent properties
var loaded = (evt.loaded / evt.total);
if (loaded < 1) {
// Increase the prog bar length
style.width = (loaded * 200) + "px";
}
}
}
function loaded(evt) {
// Obtain the read file data
var fileString = evt.target.result;
// Handle UTF-16 file dump
$('#output_field').text(fileString);
}
var res = readFile(this.files[0]);
var reader = new FileReader();
reader.readAsText(this.files[0], "UTF-8");
reader.onprogress = updateProgress;
reader.onload = loaded;
});
});
function readFile(file) {
var reader = new FileReader(),
result = 'empty';
reader.onload = function(e) {
result = e.target.result;
};
reader.readAsText(file);
return result;
}
当然,还有HTML部分:
<input type="file" id="file_input" class="foo" />
<div id="progBar" style="background-color:black;width:1px;"> </div>
<div id="output_field" class="foo"></div>
似乎适用于*.txt文件。
https://stackoverflow.com/questions/11829537
复制相似问题