Bagaimana untuk Semak Lebar dan Ketinggian Imej Sebelum Muat Naik dengan Javascript?

Semak Lebar dan Tinggi Imej Sebelum Muat Naik dengan Javascript

Sebelum pengguna boleh memuat naik imej ke aplikasi web, adalah penting untuk mengesahkan dimensinya untuk memastikan keserasian dengan keperluan paparan yang diingini. Kod Javascript ini menyediakan penyelesaian untuk menyemak lebar dan ketinggian imej sebelum membenarkan fail diserahkan:

<code class="javascript">var _URL = window.URL || window.webkitURL;
$(&quot;#file&quot;).change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            if (this.width < 240 || this.height < 240) {
                alert("Image too small (min 240x240)");
            } else {
                // Validation passed
                // Proceed with upload
            }
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});</code>

Kod ini mencipta objek imej daripada fail yang dipilih oleh pengguna. Peristiwa "beban" objek imej digunakan untuk mendapatkan lebar dan tinggi, yang kemudiannya dibandingkan dengan dimensi minimum yang dikehendaki. Jika imej memenuhi kriteria, pengesahan lulus, membenarkan muat naik diteruskan. Jika tidak, amaran dipaparkan, memaklumkan pengguna bahawa imej itu terlalu kecil.

Nota: Adalah penting untuk mempertimbangkan bahawa sesetengah penyemak imbas, seperti Safari, mungkin tidak menyokong kaedah URL.createObjectURL(). Untuk keserasian merentas pelayar, kaedah alternatif harus diterokai jika perlu.

Atas ialah kandungan terperinci Bagaimana untuk Semak Lebar dan Ketinggian Imej Sebelum Muat Naik dengan Javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!