Validation Problems Uploading Multiple JavaScript Files

Question

Validation Problems Uploading Multiple JavaScript Files

Navigation

#1 by (2 votes)

2

No form, in an Input selecting multiple images

@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>  
}

I've created validation in 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;
    }

In the onSubmit event of the form I am calling my validation, but it is not working, so I was able to analyze the "img" is not loading (or having time to load), because the debugger is used or even before the "IF" that I test the validation I put an alert (img.width) it brings the value "0", but it enters the condition of "IF". Is there any way to expect to load the object of type Image?

javascript html5 asp.net-mvc

asked by anonymous 30.09.2016 / 18:31

1 answer

What is and how does a static block work in Java? [duplicate] How to do inner join within Auth in laravel 5.3

score 2 · Accepted Answer

DOM-based objects usually have events that can be notified in two ways:

Assigning the property ( "on" +EventName) to the reference of a function;
using the object.addEventListener(nomeDoEvento, callback, usarCaptura) method. .

With this you can create a notifier for the "load" event of the image.

It is still possible to find out if an instantiated image of HTMLImageElement or Image was loaded through a timer that ends up with the "complete" is equal to true , or if its size in pixels is greater than 0 . So far I know that the "complete" property is supported in several browsers, above IE5.

It is easy to use object.addEventListener() , this method allows you to add as many event notifiers as you want, and if you want to remove an existing event notifier you will need to have the function reference used as callback, then use object.removeEventListener(nomeDoEvento, callback) . In old browsers in MS IE the equivalent of these methods are: object.attachEvent(nomeDoEvento, callback) and object.detachEvent(nomeDoEvento, callback) , where Evernote requires the "on" prefix.

Returning to the image, to see if it has loaded, you can set a notifier for your "load" event.

img.addEventListener("load", function() {
    /* statements */
}, false);

img.src = _URL.createObjectURL(file);

Note: You should set the event notifier "load" before setting the source (src) of the image, otherwise the image can load before.