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

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

这是html代码：

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

 function onFileLoad(e) { $('#preview').append(''); } 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); } 

Answer 2

你可以这样试试

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(''); alert("Size=" + size); alert("Width=" + width + " height=" + height); } 

两种方法

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

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