HTML5 FileReader 如何返回结果？
Posted
技术标签:
【中文标题】HTML5 FileReader 如何返回结果？【英文标题】：HTML5 FileReader how to return result? 【发布时间】：2012-08-03 11:57:27 【问题描述】：我使用 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;
http://jsfiddle.net/ub22m/4/
显示为“空”。
如何等到“结果”为空？ 另一种方式？
【问题讨论】：
【参考方案1】：读取发生异步。你需要提供一个自定义的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 将被填充。
一开始使用回调进行编程有点困难，但对于实现高级功能来说，这是绝对必要的。
【讨论】：
这两个es有区别吗？
@ChrisChudzicki 是的，它们是不同的。第一个e 是jQuery event object。第二个e 是load event object。【参考方案2】：
使用 Promise 包装 FileReader，然后使用await 获取结果：
https://blog.shovonhasan.com/using-promises-with-filereader/
【讨论】：
【参考方案3】：这里是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 文件。
See this fiddle.
【讨论】：
奇怪，小提琴恢复到旧版本。现已修复。 return 是我相信这里提到的关键字。 readFile 函数将始终返回 'empty'【参考方案4】：用例 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>
【讨论】：
以上是关于HTML5 FileReader 如何返回结果？的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 文件 API：FileReader.readAsText() 返回“未定义”
Html5 js FileReader接口（艺博会，添加商品时，上传图片，addGoods.html页）
html5 fileReader -- 如何只读取文件的前 N 个字符？