javascript/jquery上传图像文件的大小和维度

我需要使用javascript/jquery显示以KB为单位的图像大小和尺寸（高度、宽度）。我很少看到类似的帖子，但没有一个能帮到我。我有两套代码，分别工作。我不知道如何把它们组合在一起

这是html代码：

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

---

请帮助我将这些代码放在一起，并同时显示尺寸和尺寸。

要使用这两个代码，只需在

displayPreview

功能中将它们组合起来即可。您可以创建将附加到预览中的图像对象，并在同一个函数中查找其大小、宽度和高度

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

你可以这样试试

HTML

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


}

var URL=window.URL | | window.webkitURL；
函数显示预览（文件）{
var img=新图像（），
fileSize=Math.round（files.size/1024）；
img.onload=函数（）{
var width=this.width，
高度=这个高度，
imgsrc=this.src；
doSomething（文件大小、宽度、高度、imgsrc）；//调用函数
};
img.src=\u URL.createObjectURL（文件）；
}
//在此函数中执行所需操作
功能剂量测量（尺寸、宽度、高度、imgsrc）{
$（'#预览'）。追加（''）；
警报（“大小=”+大小）；
警报（“宽度=”+宽度+”高度=+高度）；
}

两种方法

JSFIDLE

---

jsFIDLE

如何使用jquery获取图像宽度和高度

使用jQuery在图像上传过程中查找图像的宽度和高度

上载图像文件的大小和尺寸

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

---

Manish，我无法重现上述代码所期望的内容。你能再检查一下吗？实际上，我已经访问了这个链接，并在这里发布我的查询之前尝试了它。即使我复制了原样的代码；它不起作用。我正在使用最新版本的chrome和firefox。@sridhar。试试上面的代码。希望能有帮助。或者你可以选择straker的版本，@straker发布的good-tooTh方法很好，但是我明白了为什么JSFIDLE代码对我不起作用。忽略了初始化“$（window.load（function（）{}”）；”真是愚蠢上面的代码在只有一个upload file元素时工作。当有很多元素时该怎么办？我找到了通过使用不同的元素ID调用相同的函数来处理多个上传文件元素的方法<代码>$（“#filex”）.change（函数（）{var file=this.files[0]；显示预览（file）；}）如何在javascript文件中引用ID？

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

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


}

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