Javascript ile yüklemeden önce resim genişliğini ve yüksekliğini kontrol edin


122

Kullanıcının bir resim koyabileceği bir forma sahip bir JPS'im var:

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

Bu js'yi yazdım:

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

dosya türünü ve boyutunu kontrol etmek için iyi çalışıyor. Şimdi resim genişliğini ve yüksekliğini kontrol etmek istiyorum ama yapamıyorum.
Denedim target.files[0].widthama anladım undefined. Aldığım diğer yollarla 0.
Baska öneri?

Yanıtlar:


221

Dosya sadece bir dosyadır, aşağıdaki gibi bir görüntü oluşturmanız gerekir:

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/

Sanırım bunun yalnızca birkaç tarayıcıda desteklendiğini fark ediyorsunuz. Çoğunlukla firefox ve chrome, şimdiye kadar opera da olabilirdi.

PS URL.createObjectURL () yöntemi MediaStream arayüzünden kaldırılmıştır. Bu yöntem 2013'te kullanımdan kaldırıldı ve HTMLMediaElement.srcObject'e akışlar atanarak yerini aldı. Daha az güvenli olduğu için eski yöntem kaldırıldı ve akışı sonlandırmak için URL.revokeOjbectURL () çağrısı yapılması gerekti. Diğer kullanıcı aracıları bu özellik özelliğini ya kullanımdan kaldırdı (Firefox) ya da kaldırdı (Safari).

Daha fazla bilgi için lütfen buraya bakın .


1
safari 6.0 yoksa kesinlikle safaride çalışmayacaktır. 6.0, şu anda dosya API'sini destekleyen tek sürümdür. Ve Apple'ın Windows için 6.0 yayınlayacağını da sanmıyorum. 5.1.7 uzun zaman önce soooo'dan en son safari versonu oldu
Seho Lee

IE10'da çalışıyor, ancak IE9 ve Below'da çalışmıyor gibi görünüyor. Bunun nedeni, IE9 ve daha düşük sürümlerin Dosya API'sini desteklememesidir ( caniuse.com/#search=file%20api )
Michael Yagudaev

28

Bana göre ihtiyacınız olan mükemmel cevap

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

Katılıyorum. Kullanıcının tarayıcısının erişebileceği bir yere yüklendikten sonra, boyutu elde etmek oldukça kolaydır. Görüntünün yüklenmesini beklemeniz gerektiğinden, için onloadetkinliğe bağlanmak isteyeceksiniz 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

Bu, boyutu kontrol etmenin en kolay yoludur

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

Belirli boyutu kontrol edin. Örnek olarak 100 x 100 kullanarak

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
Lütfen kodun tamamını biçimlendirmeyi deneyin ve kodunuzda ne yaptığınızın küçük bir açıklamasını sağlayın.
Zeeshan Adil

2

İşlevi, girdi türü file / onchange = "validateimg (this)" / onchange yöntemine ekleyin

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

    }

Stack Overflow'a hoş geldiniz! Lütfen sadece kaynak koduyla cevaplamayın. Çözümünüzün nasıl çalıştığı hakkında güzel bir açıklama sağlamaya çalışın. Bakınız: Nasıl iyi bir cevap yazabilirim? . Teşekkürler
sɐunıɔ ןɐ qɐp
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.