Bagaimana untuk Mengesahkan Dimensi Imej Sebelum Memuat naik dengan JavaScript?

Sahkan Dimensi Imej Sebelum Memuat naik dengan JavaScript

Untuk menghalang pengguna daripada memuat naik imej yang tidak sesuai, adalah penting untuk mewujudkan langkah pengesahan sebelum membenarkan muat naik imej. Artikel ini akan membimbing anda melalui proses menyemak lebar dan ketinggian imej dalam JavaScript.

Kod JavaScript Sedia Ada:

Kod JavaScript yang disediakan secara berkesan menyemak jenis fail dan saiz imej yang dimuat naik. Walau bagaimanapun, pengesahan dimensi masih belum dilaksanakan.

<code class="javascript">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;
}</code>

Pelaksanaan Pengesahan Dimensi Imej:

Untuk mengesahkan dimensi imej, kita perlu mencipta objek imej secara manual daripada fail yang dimuat naik. Kod JavaScript berikut melakukan ini:

<code class="javascript">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;
    }
});</code>

Demo dan Keserasian:

Anda boleh melihat contoh yang berfungsi bagi kod ini pada JSFiddle: http://jsfiddle. net/4N6D9/1/.

Adalah penting untuk ambil perhatian bahawa kaedah ini hanya disokong dalam pelayar tertentu, terutamanya Firefox dan Chrome.

Nota Tambahan:

Sebelum menggunakan kaedah URL.createObjectURL(), ambil perhatian bahawa kaedah tersebut telah ditamatkan untuk memperuntukkan strim kepada HTMLMediaElement.srcObject. Untuk maklumat tambahan, rujuk dokumentasi rasmi.

Atas ialah kandungan terperinci Bagaimana untuk Mengesahkan Dimensi Imej Sebelum Memuat naik dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!