如何在 XMLHttpRequest.onreadystatechange 回调函数中读取 FileReader.onloadend 中定义的变量值？

Question

在下面的代码中，我需要在函数xhr.onreadystatechange中读取变量ext（在函数reader.onloadend中定义）的值。现在正在返回 undefined。有什么解决办法吗？

function file_upload(file_input) {
  var name = file_input.dataset.target;
  var url = file_input.dataset.url;
  var path = file_input.dataset.path;
  var ext;

  for(var i = 0; i<file_input.files.length; i++) {
    var file = file_input.files[i];
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var id = xhr.responseText;
            var input = document.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("name", name);
            input.setAttribute("value", id);
            document.getElementById("btn_uload_"+name+"_"+ext).append(input);
            document.getElementById("empty_file").style.display = 'none';
            document.getElementById("single_file_"+ext).style.display = 'block';
        }
    };
    var reader  = new FileReader();
    reader.onloadend = function() {
      var bytes = reader.result;
      var ext = file.name.split(".").pop();
      var formData = new FormData();
      formData.append('bytes', bytes);
      formData.append('type', ext);
      xhr.send(formData);
    }
    reader.readAsDataURL(file);
  }
}

Answer 1

从 reader 回调中删除 var ext =... ，它只是为该函数创建一个局部变量（它没有设置外部变量。即使您删除了 var 关键字，所以它开始设置外部 ext 变量，您最终会遇到 this q&a

中讨论的问题

将您的赋值移动到循环的顶部（而不是函数的顶部）。并使用 let 而不是 var 这样它是块范围的并且不会运行进入前面提到的问题

for(var i = 0; i<file_input.files.length; i++) {
    var file = file_input.files[i];
    let ext = file.name.split('.').pop();

如何在 XMLHttpRequest.onreadystatechange 回调函数中读取 FileReader.onloadend 中定义的变量值？

How do I read value of variable defined in FileReader.onloadend inside XMLHttpRequest.onreadystatechange callback functin?

javascript

xmlhttprequest

filereader