Holen Sie sich vor dem Hochladen die Dateigröße, Bildbreite und -höhe

Antworten:

174

Hochladen mehrerer Bilder mit Vorschau der Infodaten

Verwenden von HTML5 und der Datei-API

Beispiel mit URL-API

Die Bildquellen sind eine URL, die das Blob-Objekt darstellt
<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>
Erweitern Sie das Snippet

Beispiel mit der FileReader-API

Falls Sie Bildquellen als lange Base64-codierte Datenzeichenfolgen benötigen
<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>
Erweitern Sie das Snippet

Roko C. Buljan
quelle
1
@SMC caniuse.com/fileapi unterstützt erst seit kurzem die Datei-API. Ich werde einen Blick darauf werfen
Roko C. Buljan
Wenn der Wert von i im Rückruffunktionsleser alarmiert wird. Beim Laden wird ein zufälliges Inkrement angezeigt! zB für 4 Dateien war der alarmierte Wert 0 3 2 1. Kann jemand das erklären?
Freerunner
@freerunner Ihre Dateien sind unterschiedlich groß und werden daher nicht gleichzeitig geladen.
Roko C. Buljan
Leider muss das Bild zweimal geladen werden. Es wäre viel besser, wenn wir die Breite und Höhe als Dateieigenschaften wie Dateityp erhalten könnten.
MrFox
1
Sieht aus wie developer.mozilla.org/en-US/docs/…
WebBrother
8

Wenn Sie das jQuery-Validierungs-Plugin verwenden können, können Sie dies folgendermaßen tun:

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

Die Funktion wird als Ab-Onload-Funktion übergeben.

Der Code wird von hier übernommen

Jozífek Chramršt
quelle
'this' in this'files [0] hat keinen Wert. Dies muss in element.files [0] geändert werden, damit es funktioniert.
Jetlej
Wie kann dies für die Auswahl mehrerer Dateien erreicht werden?
Shaik Nizamuddin
7

Demo

Nicht sicher, ob es das ist, was Sie wollen, aber nur ein einfaches Beispiel:

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;
});
WebBrother
quelle
3

Hier ist ein reines JavaScript-Beispiel, wie Sie eine Bilddatei auswählen, anzeigen, die Bildeigenschaften durchlaufen, das Bild von der Zeichenfläche in ein IMG-Tag umwandeln und den Bildtyp in der Größe explizit auf JPEG setzen.

Wenn Sie mit der rechten Maustaste auf das oberste Bild im Canvas-Tag klicken und Datei speichern unter wählen, wird standardmäßig ein PNG-Format verwendet. Wenn Sie mit der rechten Maustaste klicken und Datei als unteres Bild speichern, wird standardmäßig ein JPEG-Format verwendet. Jede Datei mit einer Breite von mehr als 400 Pixel wird auf eine Breite von 400 Pixel und eine Höhe proportional zur Originaldatei reduziert.

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>

SKRIPT

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

Hier ist eine jsFiddle:

jsFiddle Wählen Sie eine Bilddatei aus, zeigen Sie sie an, rufen Sie sie ab und ändern Sie die Größe einer Bilddatei

Wenn Sie in jsFiddle mit der rechten Maustaste auf das obere Bild klicken, das eine Leinwand ist, erhalten Sie nicht die gleichen Speicheroptionen wie durch Klicken mit der rechten Maustaste auf das untere Bild in einem IMG-Tag.

Alan Wells
quelle
1

Soweit ich weiß, gibt es keine einfache Möglichkeit, dies zu tun, da Javascript / JQuery keinen Zugriff auf das lokale Dateisystem hat. Es gibt einige neue Funktionen in HTML 5, mit denen Sie bestimmte Metadaten wie die Dateigröße überprüfen können, aber ich bin nicht sicher, ob Sie die Bildabmessungen tatsächlich erhalten können.

Hier ist ein Artikel, den ich zu den HTML 5-Funktionen gefunden habe, und eine Problemumgehung für den Internet Explorer, bei der ein ActiveX-Steuerelement verwendet wird. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html

Russell Durham
quelle
1

Also begann ich mit den verschiedenen Dingen zu experimentieren, die die FileReader-API zu bieten hatte, und konnte ein IMG-Tag mit einer DATA-URL erstellen.

Nachteil: Es funktioniert nicht auf Mobiltelefonen, aber es funktioniert gut auf 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>
Erweitern Sie das Snippet

(siehe dies auf einer jsfiddle unter http://jsfiddle.net/eD2Ez/530/ )
(siehe die ursprüngliche jsfiddle, die ich unter http://jsfiddle.net/eD2Ez/ hinzugefügt habe )

Sternenstaub
quelle
0

Ein funktionierendes Beispiel für die Validierung von jQuery:

   $(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));
jenson-button-event
quelle