Ist es möglich, die Abmessungen eines Bildes vor dem Hochladen zu überprüfen?

Ich habe ein upload-Steuerelement für das hochladen der Bilder auf den server, aber vor dem hochladen ich möchte nur sicherstellen, wenn die Bilder sind von korrekter Größe.
Gibt es etwas auf der client-Seite können mit javascript gemacht werden?

InformationsquelleAutor der Frage Sabby62 | 2012-11-26

  1. 36

    Könnten Sie überprüfen Sie vor dem Absenden:

    window.URL = window.URL || window.webkitURL;

$("form").submit( function( e ) {
    var form = this;
    e.preventDefault(); //Stop the submit for now
                                //Replace with your selector to find the file input in your form
    var fileInput = $(this).find("input[type=file]")[0],
        file = fileInput.files && fileInput.files[0];

    if( file ) {
        var img = new Image();

        img.src = window.URL.createObjectURL( file );

        img.onload = function() {
            var width = img.naturalWidth,
                height = img.naturalHeight;

            window.URL.revokeObjectURL( img.src );

            if( width == 400 && height == 300 ) {
                form.submit();
            }
            else {
                //fail
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        form.submit();
    }

});

    Dies funktioniert nur auf modernen Browsern, so dass Sie noch haben, überprüfen Sie die Abmessungen auf der server-Seite. Man kann auch nicht Vertrauen
    der client, also das ist ein weiterer Grund müssen Sie überprüfen Sie server-Seite sowieso.

    InformationsquelleAutor der Antwort Esailija

  2. 30

    Ja, HTML5 API dies unterstützt.

    http://www.w3.org/TR/FileAPI/ 

    var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {

    var image, file;

    if ((file = this.files[0])) {

        image = new Image();

        image.onload = function() {

            alert("The image width is " +this.width + " and image height is " + this.height);
        };

        image.src = _URL.createObjectURL(file);


    }

});​

    DEMO (getestet auf chrome)

    InformationsquelleAutor der Antwort Gurpreet Singh

  3. 0

    Geben Sie diese ein Schuss. Ich habe dies in der Vergangenheit.
    https://github.com/valums/file-uploader

    InformationsquelleAutor der Antwort webNoob

Schreibe einen Kommentar