Überprüfen Sie die Bildbreite und -höhe vor dem Hochladen mit Javascript

122

Ich habe ein JPS mit einem Formular, in das ein Benutzer ein Bild einfügen kann:

<div class="photo">
    <div>Photo (max 240x240 and 100 kb):</div>
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>

Ich habe dieses js geschrieben:

function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}

Dies funktioniert gut, um Dateityp und -größe zu überprüfen. Jetzt möchte ich die Bildbreite und -höhe überprüfen, kann dies aber nicht.
Ich habe es versucht, target.files[0].widthaber ich verstehe undefined. Mit anderen Möglichkeiten bekomme ich 0.
Irgendwelche Vorschläge?

Simon
quelle

Antworten:

221

Die Datei ist nur eine Datei. Sie müssen ein Bild wie folgt erstellen:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            alert(this.width + " " + this.height);
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});

Demo: http://jsfiddle.net/4N6D9/1/

Ich nehme an, Sie erkennen, dass dies nur in wenigen Browsern unterstützt wird. Meistens Firefox und Chrom, könnte mittlerweile auch Oper sein.

PS Die Methode URL.createObjectURL () wurde aus der MediaStream-Schnittstelle entfernt. Diese Methode wurde 2013 veraltet und durch Zuweisen von Streams zu HTMLMediaElement.srcObject ersetzt. Die alte Methode wurde entfernt, da sie weniger sicher ist und einen Aufruf von URL.revokeOjbectURL () erfordert, um den Stream zu beenden. Andere Benutzerprogramme haben diese Funktion entweder abgelehnt (Firefox) oder entfernt (Safari).

Weitere Informationen finden Sie hier .

Esailija
quelle
1
Auf jeden Fall funktioniert es nicht auf Safari, es sei denn, Sie haben Safari 6.0. 6.0 ist die einzige Version, die ab sofort die Datei-API unterstützt. Und ich glaube nicht, dass Apple jemals 6.0 für Windows veröffentlichen wird. 5.1.7 war vor langer Zeit die neueste Version der Safari von soooo
Seho Lee
Es funktioniert in IE10, scheint aber in IE9 und darunter nicht zu funktionieren. Und das liegt daran, dass IE9 und niedriger die Datei-API ( caniuse.com/#search=file%20api ) nicht unterstützen
Michael Yagudaev
28

Meiner Ansicht nach ist die perfekte Antwort, die Sie benötigen,

var reader = new FileReader();

//Read the contents of Image File.
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {

//Initiate the JavaScript Image object.
var image = new Image();

//Set the Base64 string return from FileReader as source.
image.src = e.target.result;

//Validate the File Height and Width.
image.onload = function () {
  var height = this.height;
  var width = this.width;
  if (height > 100 || width > 100) {
    alert("Height and Width must not exceed 100px.");
    return false;
  }
  alert("Uploaded image has valid Height and Width.");
  return true;
};
ash das
quelle
18

Genau. Sobald es an einen Ort hochgeladen wurde, auf den der Browser des Benutzers zugreifen kann, ist es ziemlich einfach, die Größe zu ermitteln. Da Sie warten müssen, bis das Bild geladen ist, möchten Sie sich in das onloadEreignis für einbinden img.

var width, height;

var img = document.createElement("img");
img.onload = function() {
    // `naturalWidth`/`naturalHeight` aren't supported on <IE9. Fallback to normal width/height
    // The natural size is the actual image size regardless of rendering.
    // The 'normal' width/height are for the **rendered** size.

    width  = img.naturalWidth  || img.width;
    height = img.naturalHeight || img.height; 

    // Do something with the width and height
}

// Setting the source makes it start downloading and eventually call `onload`
img.src = "http://your.website.com/userUploadedImage.jpg";
pseudosavant
quelle
7

Dies ist der einfachste Weg, um die Größe zu überprüfen

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   alert(img.width + " " + img.height);
}

Überprüfen Sie die spezifische Größe. Am Beispiel 100 x 100

let img = new Image()
img.src = window.URL.createObjectURL(event.target.files[0])
img.onload = () => {
   if(img.width === 100 && img.height === 100){
        alert(`Nice, image is the right size. It can be uploaded`)
        // upload logic here
        } else {
        alert(`Sorry, this image doesn't look like the size we wanted. It's 
   ${img.width} x ${img.height} but we require 100 x 100 size image.`);
   }                
}
Eric Wallen
quelle
2

Funktion validateimg (Strg) {

        var fileUpload = $("#txtPostImg")[0];


        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {

            if (typeof (fileUpload.files) != "undefined") {

                var reader = new FileReader();

                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {

                    var image = new Image();

                    image.src = e.target.result;
                    image.onload = function () {

                        var height = this.height;
                        var width = this.width;
                        console.log(this);
                        if ((height >= 1024 || height <= 1100) && (width >= 750 || width <= 800)) {
                            alert("Height and Width must not exceed 1100*800.");
                            return false;
                        }
                        alert("Uploaded image has valid Height and Width.");
                        return true;
                    };
                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    }
Shahbaz Raees2
quelle
1
Bitte versuchen Sie, den vollständigen Code zu formatieren und beschreiben Sie kurz, was Sie in Ihrem Code getan haben.
Zeeshan Adil
2

Hängen Sie die Funktion an die onchange-Methode des Eingabetyps file / onchange = "validateimg (this)" / an

   function validateimg(ctrl) { 
        var fileUpload = ctrl;
        var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(.jpg|.png|.gif)$");
        if (regex.test(fileUpload.value.toLowerCase())) {
            if (typeof (fileUpload.files) != "undefined") {
                var reader = new FileReader();
                reader.readAsDataURL(fileUpload.files[0]);
                reader.onload = function (e) {
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        var height = this.height;
                        var width = this.width;
                        if (height < 1100 || width < 750) {
                            alert("At least you can upload a 1100*750 photo size.");
                            return false;
                        }else{
                            alert("Uploaded image has valid Height and Width.");
                            return true;
                        }
                    };
                }
            } else {
                alert("This browser does not support HTML5.");
                return false;
            }
        } else {
            alert("Please select a valid Image file.");
            return false;
        }
    }
Ir Calif
quelle
0

    const ValidateImg = (file) =>{
        let img = new Image()
        img.src = window.URL.createObjectURL(file)
        img.onload = () => {
            if(img.width === 100 && img.height ===100){
                alert("Correct size");
                return true;
            }
            alert("Incorrect size");
            return true;
        }
    }

Jose Fdo
quelle
-1
function uploadfile(ctrl) {
    var validate = validateimg(ctrl);

    if (validate) {
        if (window.FormData !== undefined) {
            ShowLoading();
            var fileUpload = $(ctrl).get(0);
            var files = fileUpload.files;


            var fileData = new FormData();


            for (var i = 0; i < files.length; i++) {
                fileData.append(files[i].name, files[i]);
            }


            fileData.append('username', 'Wishes');

            $.ajax({
                url: 'UploadWishesFiles',
                type: "POST",
                contentType: false,
                processData: false,
                data: fileData,
                success: function(result) {
                    var id = $(ctrl).attr('id');
                    $('#' + id.replace('txt', 'hdn')).val(result);

                    $('#imgPictureEn').attr('src', '../Data/Wishes/' + result).show();

                    HideLoading();
                },
                error: function(err) {
                    alert(err.statusText);
                    HideLoading();
                }
            });
        } else {
            alert("FormData is not supported.");
        }

    }
Shahbaz Raees2
quelle
Willkommen bei Stack Overflow! Bitte antworten Sie nicht nur mit dem Quellcode. Versuchen Sie, eine schöne Beschreibung der Funktionsweise Ihrer Lösung zu geben. Siehe: Wie schreibe ich eine gute Antwort? . Danke
sɐunıɔ ןɐ qɐp