it-swarm.com.de

javascript-/Jquery-Größe und -Dimension der hochgeladenen Bilddatei

Ich muss die Bildgröße in Kilobyte und die Dimension (Höhe, Breite) mit Javascript/Jquery anzeigen. Ich habe nur wenige ähnliche Beiträge gefunden, aber keiner konnte mir helfen. Ich habe zwei Codes, die separat arbeiten. Ich kann nicht herausfinden, wie ich sie zusammenstellen soll.

Dies ist der HTML-Code:

<span id="preview"></span>
<input type="file" id="file" onchange="displayPreview(this.files);"/>

Dieser Code überprüft die Dateigröße und zeigt das Bild an:

function onFileLoad(e) { 
    $('#preview').append('<img src="'+e.target.result +'"/>');  
}
function displayPreview(files) {
    var reader = new FileReader();
    reader.onload = onFileLoad;
    reader.readAsDataURL(files[0]);
    fileSize = Math.round(files[0].size/1024);
    alert("File size is "+fileSize+" kb");
}

Dieser Code überprüft die Dateigröße:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            alert(this.width + " " + this.height);
        };
        img.src = _URL.createObjectURL(file);
    }
});

Bitte helfen Sie mir, diese Codes zusammenzustellen und Größe und Größe zusammen anzuzeigen.

10
sridhar

Um die beiden Codes zu verwenden, müssen Sie sie nur in der Funktion displayPreview kombinieren. Sie können das Bildobjekt erstellen, das an preview angehängt wird, und Größe, Breite und Höhe in derselben Funktion finden.

var _URL = window.URL || window.webkitURL;
function displayPreview(files) {
   var file = files[0];//get file   
   var img = new Image();
   var sizeKB = file.size / 1024;
   img.onload = function() {
      $('#preview').append(img);
      alert("Size: " + sizeKB + "KB\nWidth: " + img.width + "\nHeight: " + img.height);
   }
   img.src = _URL.createObjectURL(file);
}
17
Steven Lambert

Sie können es so versuchen

HTML

<span id="preview"></span>
<input type="file" id="file" />

JQUERY

var _URL = window.URL || window.webkitURL;

function displayPreview(files) {
    var img = new Image(),
        fileSize = Math.round(files.size / 1024);

    img.onload = function () {
        var width = this.width,
            height = this.height,
            imgsrc = this.src;

        doSomething(fileSize, width, height, imgsrc); //call function

    };
    img.src = _URL.createObjectURL(files);
}

// Do what you want in this function
function doSomething(size, width, height, imgsrc) {
    $('#preview').append('<img src="' + imgsrc + '">');
    alert("Size=" + size);
    alert("Width=" + width + " height=" + height);


}

Beide Methoden

Jsfiddle http://jsfiddle.net/code_snips/w4y75/ Jsfiddle http://jsfiddle.net/code_snips/w4y75/1/

2
Manish

So erhalten Sie Bildbreite und -höhe mit Jquery

Ermitteln Sie die Bildbreite und -höhe beim Hochladen von Bildern mit jQuery

Größe und Größe der Upload-Bilddatei

var _URL = window.URL || window.webkitURL;
$("#myfile").change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function () {
            var wid = this.width;
            var ht = this.height;

            alert(this.width + " " + this.height);
            alert(wid);
            alert(ht);
        };

        img.src = _URL.createObjectURL(file);
    }
});
1
Jasbir Singh