javascript/jquery 上传图片文件的大小和尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19816705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript/jquery size and dimension of uploaded image file
提问by sridhar
I need to display the image size in kilobyte and the dimension (height, width) using javascript/jquery. I came across few similar posts, but none could help me. I have two set of codes, that work separately. I can't figure out how to put them together.
我需要使用 javascript/jquery 以千字节为单位显示图像大小和尺寸（高度、宽度）。我遇到了几个类似的帖子，但没有一个可以帮助我。我有两组代码，分别工作。我无法弄清楚如何将它们放在一起。
This is the html code:
这是html代码：
<span id="preview"></span>
<input type="file" id="file" onchange="displayPreview(this.files);"/>
This piece of code checks for file size & previews the image:
这段代码检查文件大小并预览图像：
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");
}
This piece of code checks for file size:
这段代码检查文件大小：
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);
}
});
Please help me to put these codes together and display both the size and dimension together.
请帮我把这些代码放在一起，同时显示尺寸和尺寸。
回答by Steven Lambert
All you have to do to use the two codes is to combine them in the displayPreviewfunction. You can create the image object that will append to the previewand find it's size, width, and height all in the same function.
使用这两个代码所需要做的就是将它们组合在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);
}
回答by Manish
You can try like this
你可以这样试试
HTML
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);
}
Both methods
两种方法
Jsfiddle http://jsfiddle.net/code_snips/w4y75/Jsfiddle http://jsfiddle.net/code_snips/w4y75/1/
Jsfiddle http://jsfiddle.net/code_snips/w4y75/Jsfiddle http://jsfiddle.net/code_snips/w4y75/1/
回答by Jasbir Singh
How to get image width and height using jquery
如何使用jquery获取图像的宽度和高度
Find out the image width and height during image upload using jQuery
使用jQuery在图像上传过程中找出图像的宽度和高度
Size and dimension of upload image file
上传图片文件的大小和尺寸
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);
}
});
