save array of data URIs with fileReader javascript

Question

i have an input with multiples images inside, that is, i have this:

input id="imagen" onchange="trans()" type="file" name="imgs" multiple="true" class="form-control required" >

I want the trans function to save an array with the data uris inside it, so that each image has its corresponding representation in the array, however, my script has problems saving it and I do not know why.

 function trans(v) {
        blobs=new Array();
        var file    = document.querySelector('#imagen').files;
        for (i = 0; i < file.length; i++) {
            reader  = new FileReader();
            reader.readAsDataURL(file[i]);
            reader.onloadend = function () {
            blobs[i]=reader.result;
            };

        }
        console.log(blobs[0]);//this not is working
            };

EDIT: for the answer in the comment, i tried this:

var blobs=[];
    function onload(i) {
        return function() {  blobs[i]=reader.result; };
    }
    function trans(v) {

        var file    = document.querySelector('#imagen').files;
        for (i = 0; i < file.length; i++) {
            reader  = new FileReader();
            reader.readAsDataURL(file[i]);
            reader.onloadend = onload(i);

        }
        console.log(blobs[0]);//this not is working
    };

Did not work, what is wrong?