javascript/jquery 上传图片文件的大小和尺寸答案

【问题标题】：javascript/jquery size and dimension of uploaded image filejavascript/jquery 上传图片文件的大小和尺寸
【发布时间】：2013-11-17 23:06:43
【问题描述】：

我需要使用 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);
    }
});

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

【问题讨论】：

标签： javascript jquery file-upload image-size

【解决方案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);
}

【讨论】：

【解决方案2】：

你可以这样试试

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


}

两种方法

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

【讨论】：

Manish，我无法重现上述代码的预期。你能再检查一遍吗？实际上，我已经访问了该链接并在此处发布我的查询之前进行了尝试。即使我照原样复制代码；它不起作用。我正在使用最新版本的 chrome 和 firefox。
@sridhar 。试试上面的代码。希望能帮助到你。或者你也可以选择 straker 的版本，它也很好
@Straker 发布的方法很好，但我明白了为什么 jsfiddle 代码对我不起作用。忽略这个初始化'$(window).load(function(){}); 是愚蠢的。 ' 开头。
上述代码在只有一个上传文件元素时有效。人多的时候怎么办？
我想出了通过调用具有不同元素 ID 的相同函数来处理多个上传文件元素的方法。 $("#filex").change(function() { var file = this.files[0]; displayPreview(file); });如何在 javascript 文件中引用 id？

【解决方案3】：

如何使用 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);
    }
});

【讨论】：