在file upload过程中使用Javascript获取图像尺寸

我有file uploadUI元素,用户将在其中上传图片。 在这里,我必须validation客户端的图像的高度和宽度。 有没有可能find在JS中只有文件path的图像的大小?

注意:如果否,是否有其他方法可以在客户端查找维度?

您可以在W3C支持新的File API的浏览器上使用FileReader接口上的readAsDataURL函数,并将数据URL分配给imgsrc (之后您可以读取图像的heightwidth )。 目前Firefox 3.6支持File API,我认为Chrome和Safari已经或者即将。

所以你在过渡阶段的逻辑是这样的:

  1. 检测浏览器是否支持File API(这很容易: if (typeof window.FileReader === 'function') )。

  2. 如果确实如此,那么请在本地读取数据并将其插入到图像中以查找尺寸。

  3. 如果没有,请将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事件将使您能够恢复文件的尺寸。 它正在为我正在工作的应用程序工作。