javascript JS - File Reader API 获取图像文件大小和尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17773998/
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
JS - File Reader API get image file size and dimensions
提问by bombastic
Hi i'm using the following code to get the upload image using File Reader API:
嗨，我正在使用以下代码通过 File Reader API 获取上传图像：
<script type="text/javascript">
var loadImageFile = (function () {
if (window.FileReader) {
var oPreviewImg = null, oFReader = new window.FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
/*get image*/
var _img = oFREvent.target.result;
console.log(oFREvent.target);
/*add img to hidden input text*/
localStorage.photo = _img;
oPreviewImg.src = oFREvent.target.result;
};
return function () {
var aFiles = document.getElementById("imageInput").files;
if (aFiles.length === 0) { return; }
if (!rFilter.test(aFiles[0].type)) {
notify("You must select a valid image file!",3400,false); return;
}
oFReader.readAsDataURL(aFiles[0]);
}
}
})();
</script>
<form name="uploadForm">
<p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
<input type="submit" value="Send" /></p>
<input type="hidden" id="photo_1_hidden" name="photo_1"/>
</form>
it works great and it returns the base64 data of the image.
它工作得很好，它返回图像的 base64 数据。
now i would like to get also the image file size and the image width and height.
现在我还想获得图像文件大小以及图像宽度和高度。
Is it possible?
是否可以？
I tryed to log in console the file but i can't find what i'm searching for.
我尝试登录控制台文件，但找不到我要搜索的内容。
Any help appriciated thanks so much!
非常感谢任何帮助！
采纳答案by Graham P Heath
Something like this?
像这样的东西？
var oPreviewImg = new Image();
oPreviewImg.onload = function(){
console.log(this.size);
alert("'" + this.name + "' is " + this.width + " by " + this.height + " pixels in size.");
return true;
};
oPreviewImg.onerror = function(){
alert("'" + this.name + "' failed to load.");
return true;
}
oPreviewImg.src = "//placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150";
var xhr = new XMLHttpRequest();
xhr.open('HEAD', oPreviewImg.src, true);
xhr.onreadystatechange = function() {
console.log('this', this);
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
} else {
alert('ERROR');
}
}
};
xhr.send(null);
UpdateLive version replaced with Fiddle, however, due to cross site scripting concerns, the size is no longer being retrieved effectively.
UpdateLive 版本替换为 Fiddle，但是，由于跨站点脚本问题，不再有效地检索大小。
回答by Peter
I don't believe that JS is going to be capable of getting that data without first rendering the image to the viewport. That is to say, I am unfamiliar of any method that would do what you ask in the JavaScript, or JQuery libraries. Your best bet for getting data like that is going to be rendering the image to the page in a preview capacity or using a more powerful language like PHP and using an Ajax request to get the data you're looking for.
我不相信 JS 能够在不首先将图像渲染到视口的情况下获取这些数据。也就是说，我不熟悉可以在 JavaScript 或 JQuery 库中执行您要求的任何方法。获取此类数据的最佳选择是以预览功能将图像渲染到页面，或者使用更强大的语言（如 PHP）并使用 Ajax 请求来获取您要查找的数据。
