Bagaimana saya bisa mendapatkan ukuran file, tinggi dan lebar gambar sebelum diunggah ke situs web saya, dengan jQuery atau JavaScript?

Beberapa gambar diunggah dengan pratinjau data info

Menggunakan HTML5 dan File API

Contoh menggunakan URL API

Sumber gambar akan menjadi URL yang mewakili objek Blob
<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

const EL_browse  = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

const readImage  = file => {
  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);

  const img = new Image();
  img.addEventListener('load', () => {
    EL_preview.appendChild(img);
    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`);
    window.URL.revokeObjectURL(img.src); // Free some memory
  });
  img.src = window.URL.createObjectURL(file);
}

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Remove old images and data
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});

#preview img { max-height: 100px; }

<input id="browse" type="file" multiple>
<div id="preview"></div>

Contoh menggunakan API FileReader

Jika Anda memerlukan sumber gambar selama string data yang dikodekan Base64
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">

const EL_browse  = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

const readImage = file => {
  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
    return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`);

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    const img  = new Image();
    img.addEventListener('load', () => {
      EL_preview.appendChild(img);
      EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`);
    });
    img.src = reader.result;
  });
  reader.readAsDataURL(file);  
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Clear Preview
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});

#preview img { max-height: 100px; }

<input id="browse" type="file"  multiple>
<div id="preview"></div>
  

Jika Anda dapat menggunakan plugin validasi jQuery, Anda dapat melakukannya seperti ini:

Html:

<input type="file" name="photo" id="photoInput" />

JavaScript:

$.validator.addMethod('imagedim', function(value, element, param) {
  var _URL = window.URL;
        var  img;
        if ((element = this.files[0])) {
            img = new Image();
            img.onload = function () {
                console.log("Width:" + this.width + "   Height: " + this.height);//this will give you image width and height and you can easily validate here....

                return this.width >= param
            };
            img.src = _URL.createObjectURL(element);
        }
});

Fungsi ini diteruskan sebagai fungsi onload ab.

Kode diambil dari sini

Demo

Tidak yakin apakah itu yang Anda inginkan, tetapi hanya contoh sederhana:

var input = document.getElementById('input');

input.addEventListener("change", function() {
    var file  = this.files[0];
    var img = new Image();

    img.onload = function() {
        var sizes = {
            width:this.width,
            height: this.height
        };
        URL.revokeObjectURL(this.src);

        console.log('onload: sizes', sizes);
        console.log('onload: this', this);
    }

    var objectURL = URL.createObjectURL(file);

    console.log('change: file', file);
    console.log('change: objectURL', objectURL);
    img.src = objectURL;
});

Berikut adalah contoh JavaScript murni untuk memilih file gambar, menampilkannya, mengulang melalui properti gambar, dan kemudian mengubah ukuran gambar dari kanvas menjadi tag IMG dan secara eksplisit mengatur jenis gambar yang diubah ukurannya ke jpeg.

Jika Anda mengklik kanan gambar atas, di tag kanvas, dan memilih Simpan File Sebagai, itu akan default ke format PNG. Jika Anda mengklik kanan, dan Save File sebagai gambar bawah, itu akan default ke format JPEG. File apa pun yang lebarnya lebih dari 400px dikurangi menjadi 400px, dan tingginya sebanding dengan file aslinya.

HTML

<form class='frmUpload'>
  <input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>

<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
<div id='allImgProperties' style="display:inline"></div>

<div id='imgTwoForJPG'></div>

NASKAH

<script>

window.picUpload = function(frmData) {
  console.log("picUpload ran: " + frmData);

var allObjtProperties = '';
for (objProprty in frmData) {
    console.log(objProprty + " : " + frmData[objProprty]);
    allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
};

document.getElementById('allImgProperties').innerHTML = allObjtProperties;

var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");

var img = new Image;
img.src = URL.createObjectURL(frmData);

console.log('img: ' + img);

img.onload = function() {
  var picWidth = this.width;
  var picHeight = this.height;

  var wdthHghtRatio = picHeight/picWidth;
  console.log('wdthHghtRatio: ' + wdthHghtRatio);

  if (Number(picWidth) > 400) {
    var newHeight = Math.round(Number(400) * wdthHghtRatio);
  } else {
    return false;
  };

    document.getElementById('cnvsForFormat').height = newHeight;
    console.log('width: 400  h: ' + newHeight);
    //You must change the width and height settings in order to decrease the image size, but
    //it needs to be proportional to the original dimensions.
    console.log('This is BEFORE the DRAW IMAGE');
    ctx.drawImage(img,0,0, 400, newHeight);

    console.log('THIS IS AFTER THE DRAW IMAGE!');

    //Even if original image is jpeg, getting data out of the canvas will default to png if not specified
    var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
    //The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
    document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};

</script>

Ini adalah jsFiddle:

jsFiddle Memilih, menampilkan, mendapatkan properti, dan mengubah ukuran file gambar

Di jsFiddle, mengklik kanan gambar atas, yang merupakan kanvas, tidak akan memberi Anda opsi penyimpanan yang sama seperti mengklik kanan gambar bawah di tag IMG.

Sejauh yang saya tahu tidak ada cara mudah untuk melakukan ini karena Javascript / JQuery tidak memiliki akses ke sistem file lokal. Ada beberapa fitur baru di html 5 yang memungkinkan Anda untuk memeriksa data meta tertentu seperti ukuran file tetapi saya tidak yakin apakah Anda benar-benar bisa mendapatkan dimensi gambar.

Berikut adalah artikel yang saya temukan mengenai fitur html 5, dan solusi untuk IE yang melibatkan penggunaan kontrol ActiveX. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html

Jadi saya mulai bereksperimen dengan berbagai hal yang ditawarkan API FileReader dan dapat membuat tag IMG dengan URL DATA.

Kekurangan: Ini tidak berfungsi di ponsel, tetapi berfungsi dengan baik di Google Chrome.

$('input').change(function() {
    
    var fr = new FileReader;
    
    fr.onload = function() {
        var img = new Image;
        
        img.onload = function() { 
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
            $.ajax({url: img.src, async: false, success: function(result){
            		$("#result").html("READING IMAGE, PLEASE WAIT...")
            		$("#result").html("<img src='" + img.src + "' />");
                console.log("Finished reading Image");
        		}});
        };
        
        img.src = fr.result;
    };
    
    fr.readAsDataURL(this.files[0]);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" capture="camera">
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>

(lihat ini di jsfiddle di http://jsfiddle.net/eD2Ez/530/ )
(lihat jsfiddle asli yang saya tambahkan di http://jsfiddle.net/eD2Ez/ )

Contoh validasi jQuery yang berfungsi:

   $(function () {
        $('input[type=file]').on('change', function() {
            var $el = $(this);
            var files = this.files;
            var image = new Image();
            image.onload = function() {
                $el
                    .attr('data-upload-width', this.naturalWidth)
                    .attr('data-upload-height', this.naturalHeight);
            }

            image.src = URL.createObjectURL(files[0]);
        });

        jQuery.validator.unobtrusive.adapters.add('imageminwidth', ['imageminwidth'], function (options) {
            var params = {
                imageminwidth: options.params.imageminwidth.split(',')
            };

            options.rules['imageminwidth'] = params;
            if (options.message) {
                options.messages['imageminwidth'] = options.message;
            }
        });

        jQuery.validator.addMethod("imageminwidth", function (value, element, param) {
            var $el = $(element);
            if(!element.files && element.files[0]) return true;
            return parseInt($el.attr('data-upload-width')) >=  parseInt(param["imageminwidth"][0]);
        });

    } (jQuery));