Q:

Problemas em Validação Upload de Múltiplos arquivos JavaScript

No form, em um Input selecionando múltiplas imagens
@using (Html.BeginForm("Edit", "RoomType", FormMethod.Post, new { enctype = "multipart/form-data", onSubmit = "return ValidateImagesUpload()" }))
{
    @Html.AntiForgeryToken()
    <div class="form-group">
        <div class="col-md-5">
            <input id="file-upload" name="file-upload" type="file" multiple accept="image/*">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Salvar" class="btn btn-primary" />
            @Html.ActionLink("Voltar", "Edit", "Company", new { id = ApplicationManager.CompanyId }, new { @class = "btn btn-default" })                                              
        </div>
    </div>  
}

Criei a validação em JavaScript
   function ValidateImagesUpload(e) {
        var fileValue = document.getElementById("file-upload").files;
        var file;
        var _URL = window.URL || window.webkitURL;
        debugger;
        for (var i = 0; i < fileValue.length; i++) {
            if (file = fileValue[i]) {
                //var img = new Image();
                var img = document.createElement("img");
                img.src = _URL.createObjectURL(file);

                if (img.width > 150 || img.height > 150) {
                    var message = document.querySelector(".message-error");
                    message.innerHTML = "<p>Arquivo: " + file.name + " não respeita o limite de 150x150 px</p>";
                    message.removeAttribute("hidden");
                    return false;
                }
            }
        }

        return true;
    }

No evento onSubmit do form estou chamando minha validação, porém não está funcionando, pelo que consegui analisar o "img" não está carregando (ou tendo tempo de carregar), pois se utilizo o debugger ou mesmo antes do "IF" que testo a validação coloco um  alert(img.width) ele traz o valor "0", mas entra na condição do "IF".
Existe alguma forma de esperar carregar o objeto do tipo Image?

A:

Objetos baseados em DOM geralmente tem eventos que podem ser notificados de duas maneiras:

atribuindo a propriedade ("on" + nomeDoEvento) com a referência de uma função;
usando o método object.addEventListener(nomeDoEvento, callback, usarCaptura).

Com isso você pode criar um notificador para o evento "load" da imagem.
Ainda assim é possível descobrir se uma imagem instanciada de HTMLImageElement ou Image foi carregada através de um timer que termina até a propriedade "complete" for igual à true, ou se seu tamanho em pixels é maior que 0. Até agora sei que a propriedade "complete" é suportada em vários navegadores, acima do IE5.
É fácil usar object.addEventListener(), esse método permite adicionar quantos notificadores de eventos você quiser, e se você quiser remover um notificador de evento existente vai precisar ter a referência da função usada como callback, em seguida usar object.removeEventListener(nomeDoEvento, callback). Em navegadores velhos do MS IE o equivalente desses métodos são: object.attachEvent(nomeDoEvento, callback) e object.detachEvent(nomeDoEvento, callback), onde o nomeDoEvento requere o préfixo "on".
Voltando para a imagem, para saber se ela carregou, você pode definir um notificador do seu evento "load".
img.addEventListener("load", function() {
    /* statements */
}, false);

img.src = _URL.createObjectURL(file);

Observação: você deve definir o notificador do evento "load" antes de definir a fonte (src) da imagem, se não a imagem pode carregar antes.

