Dapatkan ukuran file, lebar dan tinggi gambar sebelum diunggah


98

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



1
Berikut adalah tutorial langkah demi langkah untuk mendapatkan nama file, jenis dan ukuran codepedia.info/…
Satinder singh

Terima Kasih Atas Pertanyaan Anda. Mamnoon
Mohammadali Mirhamed

Jawaban:


174

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>
  


1
@SMC caniuse.com/fileapi hanya baru-baru mendukung Berkas API. Saya akan lihat
Roko C. Buljan

ketika nilai i diperingatkan dalam fungsi callback reader.onload itu menunjukkan kenaikan acak! misal untuk 4 file nilai yang disiagakan adalah 0 3 2 1. Adakah yang bisa menjelaskan itu?
freerunner

@freerunner ukuran file Anda berbeda, oleh karena itu tidak dimuat pada waktu yang sama.
Roko C. Buljan

Sayangnya ini membutuhkan pemuatan gambar dua kali. Akan lebih baik jika kita bisa mendapatkan lebar dan tinggi sebagai properti file seperti tipe file.
MrFox


8

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


'ini' di this'files [0] tidak memiliki nilai. Ini harus diubah menjadi element.files [0] agar bisa bekerja.
jetlej

Bagaimana cara mencapai ini untuk beberapa pilihan file?
Shaik Nizamuddin

7

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

3

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.


1

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


1

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/ )


0

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