javascript/jquery上传图像文件的大小和尺寸

Question

我需要使用javascript/jquery以千字节和维度(高度,宽度)显示图像大小.我遇到过几个类似的帖子,但没有人可以帮助我.我有两组代码,分别工作.我无法弄清楚如何将它们组合在一起.

这是html代码:

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

这段代码检查文件大小并预览图像:

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

这段代码检查文件大小:

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

请帮我把这些代码放在一起,同时显示尺寸和尺寸.

Answer 1

要使用这两个代码,您只需将它们组合在displayPreview函数中即可.您可以创建将附加到的图像对象preview,并在同一函数中找到它的大小,宽度和高度.

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