我在 XML 文件中定义了各种 HTML 元素。 我无法整体显示我的 XML 元素，但它有多行，每行都包含复选框、文件上传选项等。
我使用 Javascript 来获取这些元素，然后使用 XMLHTTPRequest，将这些请求发送到 Controller 进行处理。
想象 HTML 元素如下所示:
Row1 ---- Checkbox1_Row1 TextDescription_Row1 FileUpload_Row1
Row2 ---- Checkbox1_Row2 TextDescription_Row2 FileUpload_Row2
我可以有尽可能多的行。
使用 Javascript，我获取所有这些表单元素，并且这些元素按行号(Row1、Row2)进行区分。
我循环遍历每个表单元素，然后
for(var j=0; j< formelements.length; j+++)
{
if (formElements[j].type == "textbox")
{
Do something
}
elseif (formElements[j].type == "file")
{
var Base64String;
var ready = false;
var fileName = formElements[j].files[0].name;
var check = function () {
if (ready === true) {
array.push(Base64String);
return;
}
setTimeout(check, 1000);
}
check();
var reader = new FileReader();
reader.onloadend = function (evt) {
Base64String = evt.target.result;
ready = true;
};
reader.readAsDataURL(file);
}
}
我正在使用一个数组来推送与每行相对应的所有值，并且具有最终值的数组将在经过一些更改后发送到 Controller 。对于文件上传选项，我从每一行读取文件并将它们转换为二进制格式并发送给 Controller 。如果只有一行，这种方法效果很好。当有多行时，这种方法会发生什么情况，在循环表单元素时，它检查第一行(例如文本框)的所有内容并将其放入数组中，但当它是文件类型时，它会进入循环并读取文件。读取文件在这里需要一些时间，然后时间循环会转到下一个表单元素(除了 Row2 之外什么也没有)。现在 Row2 表单元素出现在图片中并表示，我们不上传任何文件，它将为空。现在 check() 函数已完成，并且 row1 中的文件已完全读取。由于循环已在第 2 行表单元素中，因此除了空值外，该文件值将分配给第 2 行。因此，当涉及文件类型时，Row2 将同时具有空值和文件值，但 Row1 没有值。同样，如果我在多行中有许多文件，则文件值将根据 FileReader 读取的时间分配给当前循环中的任意行表单元素。
我需要确保在转到下一个表单元素之前完全读取文件值。如何实现这一目标？
************************更新************************
这里提到的将我的问题标记为重复的问题只有文件类型进来，因此，他们可以循环遍历文件类型。对我来说，表单元素由 Checkbox1_Row1、TextDescription_Row1、FileUpload_Row1、Checkbox1_Row2、TextDescription_Row2、FileUpload_Row2 组成。
我必须确保 FileUpload_Row1 具有从文件中读取的正确值，然后再转到下一个表单元素(此处为 Checkbox1_Row2)。
最佳答案
evt 应该是 evt.target.result 处的 event。 .push() event.target.result 到 fileList 数组，当 fileList .length 时执行操作 等于计数
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var files = Array.prototype.map.call(
document.querySelectorAll("[id^=myFile]")
, function(input) {
return {id:input.dataset.id, file: input.files[0]};
});
var count = files.length; // total number of files
var fileList = []; // accepted files
for (var i = 0; i < count; i++) {
var file = files[i].file;
var id = files[i].id;
var filename = files[i].file.name;
if (i >= count) {
break;
}
var reader = new FileReader();
reader.onload = (function(id, filename) {
return function(event) {
fileList.push({id, filename, file:event.target.result}); {
if (fileList.length === count) {
// do stuff with `fileList`
console.log(fileList);
}
}
}
})(id, filename);
reader.readAsDataURL(file);
}
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input type="file" id="myFile_row1" data-id="A">
<input type="file" id="myFile_row2" data-id="B">
<input type="file" id="myFile_row3" data-id="C">
<button onclick="myFunction()">Try it</button>
</body>
</html>关于javascript - 如何使用 Javascript 确保 FileReader 完全读取文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43971178/