在file upload过程中使用Javascript获取图像尺寸
我有file uploadUI元素，用户将在其中上传图片。 在这里，我必须validation客户端的图像的高度和宽度。 有没有可能find在JS中只有文件path的图像的大小？
注意：如果否，是否有其他方法可以在客户端查找维度？
您可以在W3C支持新的File API的浏览器上使用FileReader接口上的readAsDataURL函数，并将数据URL分配给img的src （之后您可以读取图像的height和width ）。 目前Firefox 3.6支持File API，我认为Chrome和Safari已经或者即将。
所以你在过渡阶段的逻辑是这样的：
-
检测浏览器是否支持File API（这很容易：
if (typeof window.FileReader === 'function')）。 -
如果确实如此，那么请在本地读取数据并将其插入到图像中以查找尺寸。
-
如果没有，请将file upload到服务器（可能是从iframe提交表单以避免离开页面），然后轮询服务器询问图像的大小（或者只是询问上传的图像，如果您愿意的话）。
编辑我一直在努力处理一段File API的例子， 这里是一个：
<!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）风格的事件处理程序等。
前面的例子是好的，但是它并不完美。
var reader = new FileReader(); reader.onload = function(e) { var image = new Image(); image.onload = function() { console.log(this.width, this.height); }; image.src = e.target.result; }; reader.readAsDataURL(this.files[0]);
不，你不能，文件名和文件内容是发送到服务器的http 头体，JavaScript不能操纵这些领域。
如果您使用基于Flash的上传function（例如SWFUpload），则可以获得所有您想要的信息以及多个排队上传。
我build议使用SWFUpload，除了作为用户之外，我绝不会将它们关联起来。
你也可以写一个silverlight控件来select你的文件并上传它。
HTML5绝对是这里的正确解决scheme。 你应该总是为未来编码，而不是过去。 处理HTML4浏览器的最好方法是回退到降级function或使用Flash（但只有当浏览器不支持HTML5文件API时）
使用img.onload事件将使您能够恢复文件的尺寸。 它正在为我正在工作的应用程序工作。
