visualizarImg() is not defined at Htmlinputelement.onchange

Question

I’ve seen some similar topics, followed the recommendations and was unsuccessful, so I open up a new topic. This error occurs when I upload an image and at the time of displaying it this message appears. PS: I already checked the page imports and everything is ok.

HTML

                                <div class="form-group col-md-12" >
                                     <div class="form-group">
                                      <input type="file" id="file" onchange="visualizarImg();" />

                                      </div>
                                </div>
                                   <div class=" form-group col-md-6">
                                      <img id="imagemPromocao" src=""  class="img-responsive"  />   
                                   </div>
                                </div>

Javascript

window.onload = function() {
    function visualizarImg() {
        var preview = document.querySelectorAll('img').item(1);
        var file = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();

        reader.onloadend = function() {
            preview.src = reader.result;// carrega em base64 a img
        };

        if (file) {
            reader.readAsDataURL(file);
        } else {
            preview.src = "";
        }

    }
}

Answer 1

Since the function is inside onload, it cannot be accessed by html. Either you put it off the onload or add an event inside the onload instead of the html event:

seuinput.addEventListener("input", function () {
    //aqui o código da função visualizarImg
}, false);