我使用JS FileReader。我希望在文件读取操作后获得结果并使用此数据。 FileReader是异步的，我不知道结果何时准备就绪。如何正确完成？
$(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;
}
它显示“空”。
如何等到“结果”为空？其他方式？
读取是异步发生的。您需要提供自定义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回调触发之前，该操作不会运行。
使用回调进行编程起初有点难以正确使用，但它对于实现高级功能是绝对必要的。
这是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文件。
使用Promise包装FileReader，然后使用await获取结果：
https://blog.shovonhasan.com/using-promises-with-filereader/
用例FileReader
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>
<body>
<script>
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
var sizef = document.getElementById('uploadImage').files[0].size;
document.getElementById("uploadPreview").src = oFREvent.target.result;
document.getElementById("uploadImageValue").value = oFREvent.target.result;
};
};
jQuery(document).ready(function(){
$('#viewSource').click(function ()
{
var imgUrl = $('#uploadImageValue').val();
alert(imgUrl);
});
});
</script>
<div>
<input type="hidden" id="uploadImageValue" name="uploadImageValue" value="" />
<img id="uploadPreview" style="width: 150px; height: 150px;" /><br />
<input id="uploadImage" style="width:120px" type="file" size="10" accept="image/jpeg,image/gif, image/png" name="myPhoto" onchange="PreviewImage();" />
</div>
<a href="#" id="viewSource">Source file</a>
</body>
</html>