HTML5 FileReader如何返回结果？
HTML5 FileReader如何返回结果？
提问于 2012-08-06 21:44:53
我使用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“为空？另一种方式？
回答 3
Stack Overflow用户
回答已采纳
发布于 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将被填满。
使用回调进行编程一开始有点困难，但对于实现高级功能来说，这是绝对必要的。
Stack Overflow用户
发布于 2018-04-28 05:58:54
使用Promise包装FileReader，然后使用await获得结果：
https://blog.shovonhasan.com/using-promises-with-filereader/
Stack Overflow用户
发布于 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文件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11829537
复制相关文章
相似问题