Periksa lebar dan tinggi gambar sebelum mengunggah dengan Javascript


122

Saya memiliki JPS dengan formulir di mana pengguna dapat meletakkan gambar:

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

Saya telah menulis js ini:

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;
}

yang berfungsi dengan baik untuk memeriksa jenis dan ukuran file. Sekarang saya ingin memeriksa lebar dan tinggi gambar tetapi saya tidak dapat melakukannya.
Saya telah mencoba target.files[0].widthtetapi saya mengerti undefined. Dengan cara lain saya dapatkan 0.
Ada saran?

Jawaban:


221

File tersebut hanyalah sebuah file, Anda perlu membuat gambar seperti ini:

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/

Saya kira Anda menyadari ini hanya didukung di beberapa browser. Kebanyakan firefox dan chrome, bisa jadi opera juga sekarang.

PS Metode URL.createObjectURL () telah dihapus dari antarmuka MediaStream. Metode ini sudah tidak digunakan lagi pada tahun 2013 dan digantikan dengan mengalirkan aliran ke HTMLMediaElement.srcObject. Metode lama dihapus karena kurang aman, memerlukan panggilan ke URL.revokeOjbectURL () untuk mengakhiri streaming. Agen pengguna lain telah menghentikan (Firefox) atau menghapus (Safari) fitur fitur ini.

Untuk informasi lebih lanjut, silakan lihat di sini .


1
pasti itu tidak akan bekerja di safari kecuali jika Anda memiliki safari 6.0. 6.0 adalah satu-satunya versi yang mendukung API file saat ini. Dan saya tidak berpikir apel akan merilis 6.0 untuk windows. 5.1.7 telah menjadi versi safari terbaru dari soooo dahulu kala
Seho Lee

Ini berfungsi di IE10, tetapi tampaknya tidak berfungsi di IE9 dan Di Bawah. Dan itu karena IE9 dan di bawahnya tidak mendukung API File ( caniuse.com/#search=file%20api )
Michael Yagudaev

28

Dalam pandangan saya jawaban sempurna yang harus Anda butuhkan adalah

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;
};

18

Saya setuju. Setelah diunggah ke suatu tempat yang dapat diakses browser pengguna, maka cukup mudah untuk mendapatkan ukurannya. Karena Anda harus menunggu gambar dimuat, Anda pasti ingin mengikuti onloadacara tersebut 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";

7

Ini adalah cara termudah untuk memeriksa ukurannya

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

Periksa ukuran tertentu. Menggunakan 100 x 100 sebagai contoh

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.`);
   }                
}

2

function validateimg (ctrl) {

        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;
        }
    }

1
Harap coba untuk memformat kode lengkap dan memberikan sedikit deskripsi tentang apa yang Anda lakukan dalam kode Anda.
Zeeshan Adil

2

Lampirkan fungsi ke metode onchange dari jenis input file / onchange = "validateimg (this)" /

   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;
        }
    }

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;
        }
    }


-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.");
        }

    }

Selamat datang di Stack Overflow! Tolong jangan menjawab hanya dengan kode sumber. Cobalah untuk memberikan gambaran yang bagus tentang bagaimana solusi Anda bekerja. Lihat: Bagaimana cara menulis jawaban yang baik? . Terima kasih
sɐunıɔ ןɐ qɐp
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.