获取使用Javascript文件上传过程中，图像的尺寸 [英] Get Image dimensions using Javascript during file upload
问题描述
我在其中用户将上传图片文件上传UI元素。在这里，我要验证在客户端图像的高度和宽度。是否有可能发现有只在JS文件路径中图像的大小？
I have file upload UI element in which the user will upload images. Here I have to validate the height and width of the image in client side. Is it possible to find the size of the image having only the file path in JS?
注意：如果没有，是否有任何其他方式找到客户端的尺寸
Note: If No, is there any other way to find the dimensions in Client side?
推荐答案
您可以在支持新的浏览器 readAsDataURL 的的FileReader 接口功能和分配数据的URL到的src 的 IMG （之后就可以阅读高度和宽度图片）。目前，Firefox 3.6的支持文件API，而且我认为Chrome和Safari或者已经做或即将
You can do this on browsers that support the new File API from the W3C, using the readAsDataURL function on the FileReader interface and assigning the data URL to the src of an img (after which you can read the height and width of the image). Currently Firefox 3.6 supports the File API, and I think Chrome and Safari either already do or are about to.
所以在过渡阶段你的逻辑是这样的：
So your logic during the transitional phase would be something like this:
-
检测浏览器是否支持文件API。（这是很容易：
如果（typeof运算window.FileReader ==='功能'））
如果是这样，伟大的，在本地读取数据和图像找到尺寸插入。
If it does, great, read the data locally and insert it in an image to find the dimensions.
如果不是，将文件上传到服务器（可能提交从一个iframe的形式，以避免留下页），然后轮询服务器要求图像有多大（或只是要求上传的图片，如果你preFER）。
If not, upload the file to the server (probably submitting the form from an iframe to avoid leaving the page), and then poll the server asking how big the image is (or just asking for the uploaded image, if you prefer).
修改我一直工作了文件API一段时间的一个例子。这里有一个：
Edit I've been meaning to work up an example of the File API for some time; here's one:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show Image Dimensions Locally</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function loadImage() {
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('imgfile');
if (!input) {
write("Um, couldn't find the imgfile element.");
}
else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = document.createElement('img');
img.onload = imageLoaded;
img.style.display = 'none'; // If you don't want it showing
img.src = fr.result;
document.body.appendChild(img);
}
function imageLoaded() {
write(img.width + "x" + img.height);
// This next bit removes the image, which is obviously optional -- perhaps you want
// to do something with it!
img.parentNode.removeChild(img);
img = undefined;
}
function write(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='imgfile'>
<input type='button' id='btnLoad' value='Load' onclick='loadImage();'>
</form>
</body>
</html>
在Firefox 3.6的伟大工程。我避免使用任何图书馆那里，所以道歉属性（DOM0）风格的事件处理程序和这样。
Works great on Firefox 3.6. I avoided using any library there, so apologies for the attribute (DOM0) style event handlers and such.
这篇关于获取使用Javascript文件上传过程中，图像的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
