Bagaimana untuk Mendapatkan Dimensi Imej untuk Pengesahan Muat Naik dalam JavaScript?

Mengesahkan Dimensi Imej untuk Muat Naik dengan Javascript

Apabila melaksanakan borang muat naik imej dalam Javascript, memastikan imej yang dimuat naik memenuhi keperluan saiz tertentu adalah penting . Artikel ini meneroka masalah biasa yang dihadapi semasa pengesahan saiz imej: mendapatkan semula lebar dan ketinggian imej yang dipilih.

Masalahnya

Fungsi Javascript berikut, direka bentuk untuk menyemak jenis dan saiz fail, gagal untuk mendapatkan semula dimensi imej:

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        // Code to handle file type
    }
    if(target.files[0].size > 102400) {
        // Code to handle image size
    }
    // No code yet for image width and height
}</code>

Penyelesaian

Untuk mendapatkan semula dimensi imej, kita perlu mencipta objek imej daripada fail yang dipilih . Ini boleh dicapai menggunakan kaedah URL.createObjectURL():

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

Coretan kod ini mencipta objek Imej dan memuatkan fail yang dipilih menggunakan img.src. Setelah imej dimuatkan, fungsi panggil balik img.onload dilaksanakan, di mana kita boleh mengakses lebar dan ketinggian imej.

Nota Keserasian

URL.createObjectURL( ) kaedah tidak disokong secara universal merentas pelayar. Ia disokong terutamanya dalam Firefox dan Chrome. Untuk penyemak imbas lain, kaedah alternatif mungkin diperlukan untuk pengesahan saiz imej.

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Dimensi Imej untuk Pengesahan Muat Naik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!