Iterating through : Reader.OnLoad

问题

I think I'm quite close to resolving this for myself but I just can't get the last part working so was hoping for a little bit of help. I've spent the last couple of weeks trying to write this, using all sorts of resources from StackOverflow and although I've learned a fair bit in the process, I'm now at the stage of just wanting to get it working (frustrated!)

When you run the script, it just gives a button which accepts multiple files to be selected. For each file selected, all I really need to get is the Base64 image data. I've managed to do this but since found out when getting this data, some of my images were upside down!

So.. I went off again, done some more research and put in a couple of functions which; a) detect if the image orientation needed adjusting.. and b) to adjust it as necessary. You'll see references to these 2 functions although I haven't included them. Seems to work, not fully tested yet because of the problem I have right now.

So I added a few alert commands into this so I could see the flow, I run the script and it shows me the first arrayCounter. It then gives the name of the file I'm dealing with (just so I know), then it should jump into the fileRead.onload function and start doing some more processing. At this stage, if I have say 5 files selected, it seems to go through the for loop 5 times but only ever processes the last file in the array? hope that makes sense.

I don't quite understand why it's only processing the last one. Well, I kinda do understand but I can't fix it. I know it's got something to do with asyncronous running of the fileRead.onload and I've attempted to make it work by using a closure.

I was hoping it would alert me with something like:

arrayCounter: 0 > filename: myFile.jpg > inside onload.. myFile.jpg > etc

But it seems to be acting like this instead:

arrayCounter: 0 > filename: myFile1.jpg > arrayCounter: 1 > filename: myFile2.jpg etc

Untill it gets to the 5th file, then it goes into the section where it checks orientation of the files but only ever does the last one. I can't get it running on each file, maybe I need seperate instances of the fileRead.onload instance?

I hope that makes sense. It doesn't flow in the order I'd expect it too. What am I doing wrong!

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);
  }
}

<!-- 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();" />

来源：https://stackoverflow.com/questions/49999184/iterating-through-reader-onload

标签

javascript

for-loop

base64

orientation

onload