Bagaimana untuk Mengesahkan Dimensi Imej Sebelum Memuat naik dengan JavaScript?

Susan Sarandon
Lepaskan: 2024-11-01 12:08:02
asal
536 orang telah melayarinya

How to Verify Image Dimensions Before Uploading with 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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan