在上传到我的网站之前,如何使用jQuery或JavaScript获取文件大小、图像高度和宽度?
发布于 2016-12-09 22:59:15
不确定这是否是你想要的,但只是一个简单的例子:
var input = document.getElementById('input');
input.addEventListener("change", function() {
var file = this.files[0];
var img = new Image();
img.onload = function() {
var sizes = {
width:this.width,
height: this.height
};
URL.revokeObjectURL(this.src);
console.log('onload: sizes', sizes);
console.log('onload: this', this);
}
var objectURL = URL.createObjectURL(file);
console.log('change: file', file);
console.log('change: objectURL', objectURL);
img.src = objectURL;
});
发布于 2014-07-04 11:02:30
下面是一个纯粹的JavaScript示例,它选择一个图像文件,显示它,遍历图像属性,然后将画布中的图像重新调整大小为IMG标记,并显式地将重新调整大小的图像类型设置为jpeg。
如果您在canvas标签中右键单击顶部图像,并选择Save File As,则它将默认为PNG格式。如果您右键单击,并将文件另存为下部图像,则它将默认为JPEG格式。任何宽度超过400px的文件都将减少到400px,高度与原始文件成比例。
HTML
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>
<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
<div id='allImgProperties' style="display:inline"></div>
<div id='imgTwoForJPG'></div>
脚本
<script>
window.picUpload = function(frmData) {
console.log("picUpload ran: " + frmData);
var allObjtProperties = '';
for (objProprty in frmData) {
console.log(objProprty + " : " + frmData[objProprty]);
allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
};
document.getElementById('allImgProperties').innerHTML = allObjtProperties;
var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");
var img = new Image;
img.src = URL.createObjectURL(frmData);
console.log('img: ' + img);
img.onload = function() {
var picWidth = this.width;
var picHeight = this.height;
var wdthHghtRatio = picHeight/picWidth;
console.log('wdthHghtRatio: ' + wdthHghtRatio);
if (Number(picWidth) > 400) {
var newHeight = Math.round(Number(400) * wdthHghtRatio);
} else {
return false;
};
document.getElementById('cnvsForFormat').height = newHeight;
console.log('width: 400 h: ' + newHeight);
//You must change the width and height settings in order to decrease the image size, but
//it needs to be proportional to the original dimensions.
console.log('This is BEFORE the DRAW IMAGE');
ctx.drawImage(img,0,0, 400, newHeight);
console.log('THIS IS AFTER THE DRAW IMAGE!');
//Even if original image is jpeg, getting data out of the canvas will default to png if not specified
var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
//The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};
</script>
这是一个jsFiddle:
jsFiddle Pick, display, get properties, and Re-size an image file
在jsFiddle中,右键单击顶部的图像,这是一个画布,不会给出与右键单击IMG标记中的底部图像相同的保存选项。
发布于 2012-09-25 02:47:01
据我所知,没有一种简单的方法可以做到这一点,因为Javascript/JQuery不能访问本地文件系统。Html5中有一些新功能,可以让你检查某些元数据,比如文件大小,但我不确定你是否真的能得到图像的大小。
这是我找到的一篇关于html5特性的文章,以及一个涉及使用ActiveX控件的IE变通方法。http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html
https://stackoverflow.com/questions/12570834
复制相似问题