Javascript 上传前获取文件大小、图像宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12570834/
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
Get file size, image width and height before upload
提问by Afshin
How can I get the file size, image height and width before upload to my website, with jQuery or JavaScript?
在上传到我的网站之前，如何使用 jQuery 或 JavaScript 获取文件大小、图像高度和宽度？
回答by Roko C. Buljan
Multiple images upload with info data preview
使用信息数据预览上传多张图像
Using HTML5 and the File API
使用HTML5 和文件 API
Example using URL API
使用URL API 的示例
The images sources will be a URL representing the Blob object<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">
图像源将是表示 Blob 对象的URL<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">
const EL_browse = document.getElementById('browse');
const EL_preview = document.getElementById('preview');
const readImage = file => {
if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);
const img = new Image();
img.addEventListener('load', () => {
EL_preview.appendChild(img);
EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`);
window.URL.revokeObjectURL(img.src); // Free some memory
});
img.src = window.URL.createObjectURL(file);
}
EL_browse.addEventListener('change', ev => {
EL_preview.innerHTML = ''; // Remove old images and data
const files = ev.target.files;
if (!files || !files[0]) return alert('File upload not supported');
[...files].forEach( readImage );
});#preview img { max-height: 100px; }<input id="browse" type="file" multiple>
<div id="preview"></div>Example using FileReader API
使用FileReader API 的示例
In case you need images sources as long Base64 encoded data strings<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">
如果您需要像 Base64 编码的数据字符串一样长的图像源<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">
const EL_browse = document.getElementById('browse');
const EL_preview = document.getElementById('preview');
const readImage = file => {
if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`);
const reader = new FileReader();
reader.addEventListener('load', () => {
const img = new Image();
img.addEventListener('load', () => {
EL_preview.appendChild(img);
EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`);
});
img.src = reader.result;
});
reader.readAsDataURL(file);
};
EL_browse.addEventListener('change', ev => {
EL_preview.innerHTML = ''; // Clear Preview
const files = ev.target.files;
if (!files || !files[0]) return alert('File upload not supported');
[...files].forEach( readImage );
});#preview img { max-height: 100px; }<input id="browse" type="file" multiple>
<div id="preview"></div>
回答by Jozífek Chramr?t
If you can use the jQuery validation plugin you can do it like so:
如果您可以使用 jQuery 验证插件，您可以这样做：
Html:
网址：
<input type="file" name="photo" id="photoInput" />
JavaScript:
JavaScript：
$.validator.addMethod('imagedim', function(value, element, param) {
var _URL = window.URL;
var img;
if ((element = this.files[0])) {
img = new Image();
img.onload = function () {
console.log("Width:" + this.width + " Height: " + this.height);//this will give you image width and height and you can easily validate here....
return this.width >= param
};
img.src = _URL.createObjectURL(element);
}
});
The function is passed as ab onload function.
该函数作为 ab onload 函数传递。
The code is taken from here
代码取自here
回答by WebBrother
Demo
演示
Not sure if it is what you want, but just simple example:
不确定它是否是你想要的，但只是简单的例子：
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;
});
回答by Alan Wells
Here is a pure JavaScript example of picking an image file, displaying it, looping through the image properties, and then re-sizing the image from the canvas into an IMG tag and explicitly setting the re-sized image type to jpeg.
这是一个纯 JavaScript 示例，它选择图像文件，显示它，循环图像属性，然后将画布中的图像重新调整大小为 IMG 标记，并将重新调整大小的图像类型显式设置为 jpeg。
If you right click the top image, in the canvas tag, and choose Save File As, it will default to a PNG format. If you right click, and Save File as the lower image, it will default to a JPEG format. Any file over 400px in width is reduced to 400px in width, and a height proportional to the original file.
如果您右键单击画布标签中的顶部图像，然后选择将文件另存为，它将默认为 PNG 格式。如果您右键单击并将文件另存为下方图像，它将默认为 JPEG 格式。任何宽度超过 400 像素的文件都会缩小到 400 像素的宽度，高度与原始文件成正比。
HTML
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
脚本
<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>
Here is a jsFiddle:
这是一个jsFiddle：
jsFiddle Pick, display, get properties, and Re-size an image file
In jsFiddle, right clicking the top image, which is a canvas, won't give you the same save options as right clicking the bottom image in an IMG tag.
在 jsFiddle 中，右键单击顶部图像（画布）不会为您提供与右键单击 IMG 标签中的底部图像相同的保存选项。
回答by Stardust
So I started experimenting with the different things that FileReader API had to offer and could create an IMG tag with a DATA URL.
因此，我开始尝试使用 FileReader API 必须提供的不同功能，并可以创建带有 DATA URL 的 IMG 标签。
Drawback: It doesn't work on mobile phones, but it works fine on Google Chrome.
缺点：它在手机上不起作用，但在谷歌浏览器上运行良好。
$('input').change(function() {
var fr = new FileReader;
fr.onload = function() {
var img = new Image;
img.onload = function() {
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
$.ajax({url: img.src, async: false, success: function(result){
$("#result").html("READING IMAGE, PLEASE WAIT...")
$("#result").html("<img src='" + img.src + "' />");
console.log("Finished reading Image");
}});
};
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" capture="camera">
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>(see this on a jsfiddle at http://jsfiddle.net/eD2Ez/530/)
(see the original jsfiddle that i added upon to at http://jsfiddle.net/eD2Ez/)
（参见http://jsfiddle.net/eD2Ez/530/上的 jsfiddle ）
（参见我在http://jsfiddle.net/eD2Ez/添加的原始 jsfiddle ）
回答by Russell Durham
As far as I know there is not an easy way to do this since Javascript/JQuery does not have access to the local filesystem. There are some new features in html 5 that allows you to check certain meta data such as file size but I'm not sure if you can actually get the image dimensions.
据我所知，没有一种简单的方法可以做到这一点，因为 Javascript/JQuery 无法访问本地文件系统。html 5 中有一些新功能可以让您检查某些元数据，例如文件大小，但我不确定您是否真的可以获得图像尺寸。
Here is an article I found regarding the html 5 features, and a work around for IE that involves using an ActiveX control. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html
这是我找到的一篇关于 html 5 功能的文章，以及涉及使用 ActiveX 控件的 IE 解决方法。http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html
回答by jenson-button-event
A working jQuery validate example:
一个有效的 jQuery 验证示例：
$(function () {
$('input[type=file]').on('change', function() {
var $el = $(this);
var files = this.files;
var image = new Image();
image.onload = function() {
$el
.attr('data-upload-width', this.naturalWidth)
.attr('data-upload-height', this.naturalHeight);
}
image.src = URL.createObjectURL(files[0]);
});
jQuery.validator.unobtrusive.adapters.add('imageminwidth', ['imageminwidth'], function (options) {
var params = {
imageminwidth: options.params.imageminwidth.split(',')
};
options.rules['imageminwidth'] = params;
if (options.message) {
options.messages['imageminwidth'] = options.message;
}
});
jQuery.validator.addMethod("imageminwidth", function (value, element, param) {
var $el = $(element);
if(!element.files && element.files[0]) return true;
return parseInt($el.attr('data-upload-width')) >= parseInt(param["imageminwidth"][0]);
});
} (jQuery));
