Ottieni le dimensioni del file, la larghezza e l'altezza dell'immagine prima del caricamento


98

Come posso ottenere la dimensione del file, l'altezza e la larghezza dell'immagine prima di caricarla sul mio sito web, con jQuery o JavaScript?



1
Ecco un tutorial passo passo per ottenere nome file, tipo e dimensione codepedia.info/…
Satinder singh

Grazie per la tua domanda . Mamnoon
Mohammadali Mirhamed

Risposte:


174

Caricamento di più immagini con anteprima dei dati informativi

Utilizzo di HTML5 e File API

Esempio di utilizzo dell'API URL

Le origini delle immagini saranno un URL che rappresenta l'oggetto 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>

Esempio utilizzando FileReader API

Nel caso abbiate bisogno di sorgenti di immagini come lunghe stringhe di dati codificate 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 supporta solo recentemente File API. Dò un'occhiata
Roko C. Buljan

quando il valore di i viene avvisato nella funzione di callback reader.onload mostra un incremento casuale! ad esempio per 4 file il valore come allertato era 0 3 2 1. Qualcuno può spiegarlo?
freerunner

@freerunner i tuoi file sono di dimensioni diverse, quindi non vengono caricati contemporaneamente.
Roko C. Buljan

Purtroppo questo richiede il caricamento dell'immagine due volte. Sarebbe molto meglio se potessimo ottenere la larghezza e l'altezza come proprietà del file come il tipo di file.
MrFox


8

Se puoi utilizzare il plug-in di convalida jQuery, puoi farlo in questo modo:

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

La funzione viene passata come funzione ab onload.

Il codice è preso da qui


"questo" in questo "file [0] non ha alcun valore. Questo deve essere cambiato in element.files [0] affinché funzioni.
jetlej

Come ottenerlo per la selezione di più file?
Shaik Nizamuddin

7

Demo

Non sono sicuro che sia quello che vuoi, ma solo un semplice esempio:

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

Ecco un puro esempio JavaScript di selezione di un file immagine, visualizzarlo, scorrere le proprietà dell'immagine, quindi ridimensionare l'immagine dalla tela in un tag IMG e impostare esplicitamente il tipo di immagine ridimensionato su jpeg.

Se fai clic con il pulsante destro del mouse sull'immagine in alto, nel tag canvas, e scegli Salva file con nome, verrà impostato il formato PNG per impostazione predefinita. Se fai clic con il pulsante destro del mouse e salva il file come immagine inferiore, verrà impostato il formato JPEG per impostazione predefinita. Qualsiasi file di larghezza superiore a 400 px viene ridotto a 400 px in larghezza e un'altezza proporzionale al file originale.

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>

SCRIPT

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

Ecco un jsFiddle:

jsFiddle Seleziona, visualizza, ottieni proprietà e ridimensiona un file immagine

In jsFiddle, facendo clic con il pulsante destro del mouse sull'immagine in alto, che è una tela, non avrai le stesse opzioni di salvataggio del clic con il pulsante destro del mouse sull'immagine in basso in un tag IMG.


1

Per quanto ne so non esiste un modo semplice per farlo poiché Javascript / JQuery non ha accesso al filesystem locale. Ci sono alcune nuove funzionalità in html 5 che ti consentono di controllare alcuni metadati come la dimensione del file, ma non sono sicuro che tu possa effettivamente ottenere le dimensioni dell'immagine.

Ecco un articolo che ho trovato sulle funzionalità HTML 5 e una soluzione per IE che prevede l'utilizzo di un controllo ActiveX. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html


1

Così ho iniziato a sperimentare le diverse cose che FileReader API aveva da offrire e potevo creare un tag IMG con un DATA URL.

Svantaggio: non funziona sui telefoni cellulari, ma funziona bene su 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>

(vedi questo su un jsfiddle su http://jsfiddle.net/eD2Ez/530/ )
(vedi l'originale jsfiddle che ho aggiunto a http://jsfiddle.net/eD2Ez/ )


0

Un esempio di convalida jQuery funzionante:

   $(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));
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.