Crt*_*Crt 3 html javascript jquery fileapi
我正在通过读取数组JavaScript并将该数组的大小保存在 reader.onload 事件中。我认为该reader.onload函数在文件上传完成后被调用。
event.target.result存储该数组。我希望该数组保存为变量以在其他函数中使用，但是，我尝试初始化一个空数组并使用
slice
功能，但是没有用。控制台返回一个未定义的值。
这是代码
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
</head>
<body>
<input type="file" id="file" name="files[]" multiple/>
<output id="list"></output>
<p id="demo"></p>
<script>
function handleFileSelect(evt) {
// grab the file that was uploaded which is type File.
// evt is the event that was triggered
// evt.target returns the element that triggered the event
// evt.target.files[0] returns the file that was uploaded, type File
var file = evt.target.files[0];
var myArray = [];
// instantiate a FileReader object to read/save the file that was uploaded
var reader = new FileReader();
// when the load event is fired (the file has finished uploading) this function is called
reader.onload = function(event) {
// the result attribute contains an ArrayBuffer representing the file's data.
var arrayBuffer = event.target.result;
myArray = arrayBuffer.slice(0);
document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
}
// read the file and save as an array. Once the read is finished loadend is triggered
reader.readAsArrayBuffer(file);
console.log(myArray.byteLength);
}
//console.log(myArray.byteLength);
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>
</body>
onload异步发生。因此，任何依赖于的逻辑都myArray需要在该onload函数中发生。
reader.onload = function(event) {
var arrayBuffer = event.target.result;
var myArray = arrayBuffer.slice(0);
document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
// this needs to happen here
console.log(myArray.byteLength);
}
reader.readAsArrayBuffer(file);
这与经常问到的问题（关于 AJAX/异步回调）非常相似，如何从异步回调函数返回值？
顺便说一下，这是异步的，因为我们不想在等待读取文件的潜在长时间操作时阻塞整个用户界面。这就是我们在onload这里使用处理程序的原因。
| 归档时间： |
|
| 查看次数： |
8752 次 |
| 最近记录： |