Question

我认为我已经非常接近为自己解决这个问题，但我不能让最后一部分工作，所以希望得到一些帮助。我花了最近几周试图用StackOverflow的各种资源写这篇文章，尽管我在这个过程中学到了很多东西，但我现在处于想要的阶段。让它工作（沮丧！）

运行脚本时，它只提供一个按钮，可以接受多个要选择的文件。对于所选的每个文件，我真正需要的是Base64图像数据。我设法做到了这一点但是从获得这些数据后发现，我的一些图像是颠倒的！

所以..我再次离开，做了一些研究，并提出了几个功能; a）检测图像方向是否需要调整..和b）根据需要进行调整。虽然我还没有包含它们，但您会看到对这2个函数的引用。由于我现在遇到的问题，似乎还没有完全测试。

所以我在这里添加了一些警报命令，所以我可以看到流程，我运行脚本并向我显示第一个arrayCounter。然后它给出了我正在处理的文件的名称（我知道），然后它应该跳转到fileRead.onload函数并开始做更多的处理。在这个阶段，如果我说选择了5个文件，它似乎经历了5次for循环，但只处理数组中的最后一个文件？希望这是有道理的。

我不太明白为什么它只处理最后一个。好吧，我有点理解，但我无法修复它。我知道它与fileRead.onload的异步运行有关，我试图通过使用闭包来使其工作。

我希望能用以下内容提醒我：

arrayCounter：0 ＆gt; 文件名：myFile.jpg ＆gt; 在onload .. myFile.jpg ＆gt; 等

但它似乎是这样的：

arrayCounter：0 ＆gt; 文件名：myFile1.jpg ＆gt; arrayCounter：1 ＆gt; 文件名：myFile2.jpg等

直到它到达第5个文件，然后它进入检查文件方向的部分，但只进行最后一个。我无法在每个文件上运行它，也许我需要fileRead.onload实例的单独实例？

我希望这是有道理的。它并没有按照我预期的顺序流动。我做错了什么！

＆＃13;

function encodeImageFileAsURL() {

  var filesSelected = document.getElementById("inputFileToLoad").files;
  var arrayCounter = 0;
  var imageList = [];

  for (arrayCounter = 0; arrayCounter < filesSelected.length; arrayCounter++) {

    var fileToLoad = filesSelected[arrayCounter];
    alert("arrayCounter: " + arrayCounter);

    var fileReader = new FileReader();
    alert("filename: " + fileToLoad.name);

    fileReader.onload = (function(fileLoadedEvent) {
      return function(e) {

        alert("inside onload...  " + fileToLoad.name);

        var srcData = e.target.result; // base64 data
        alert(srcData);

        alert("now we check orientation... arrayCounter: " + arrayCounter);
        getOrientation(fileToLoad, function(orientation) {
          if (orientation == 1) {
            imageList.push(srcData);
            alert("orientation not reset - arrayCounter is: " + arrayCounter);
          } else {
            resetOrientation(URL.createObjectURL(fileToLoad), orientation, function(resetBase64Image) {
              imageList.push(resetBase64Image);
              alert("orientation reset - arrayCounter is: " + arrayCounter);
            });
          }
        });

      }

      //bubble_fn_1(imageList);
    })(fileToLoad);

    fileReader.readAsDataURL(fileToLoad);
  }
}

＆＃13;

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL -->

<input id="inputFileToLoad" type="file" accept="image/*" multiple="true" style="opacity: 100" onchange="encodeImageFileAsURL();" />

＆＃13;

迭代：Reader.OnLoad

0 个答案: