在文件上传期间使用 Javascript 获取图像尺寸答案

【问题标题】：Get Image dimensions using Javascript during file upload在文件上传期间使用 Javascript 获取图像尺寸
【发布时间】：2011-02-21 08:13:15
【问题描述】：

我有文件上传 UI 元素，用户将在其中上传图片。在这里，我必须在客户端验证图像的高度和宽度。是否可以在JS中找到只有文件路径的图像大小？

注意：如果否，有没有其他方法可以在客户端找到维度？

【问题讨论】：

标签： asp.net javascript image validation file-upload

【解决方案1】：

前面的例子还可以，但远非完美。

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]);

【讨论】：

酷！但在我的情况下，JS 在第二次单击上传按钮后立即写入控制台。怎么了？
哦，找到了答案：它应该是元素中的 'onclick' 的 'onchange' 事件。无论如何，谢谢Gajus

【解决方案2】：

HTML5 在这里绝对是正确的解决方案。您应该始终为未来而不是过去编写代码。处理 HTML4 浏览器的最佳方法是使用降级的功能或使用 Flash（但前提是浏览器不支持 HTML5 文件 API）

使用 img.onload 事件将使您能够恢复文件的尺寸。它适用于我正在开发的应用程序。

【讨论】：

【解决方案3】：

如果您使用基于 Flash 的上传，例如 SWFUpload，您可以获得所需的所有信息以及多个排队上传。

我推荐 SWFUpload，除了作为用户之外，我与他们没有任何关联。

您还可以编写一个 silverlight 控件来选择您的文件并上传它。

【讨论】：

当然，这需要您的用户允许 Flash。由于所有基于 Flash 的广告，我们中的很多人都理所当然地暂时屏蔽了 Flash。
@TJC 获准，但在 HTML5 无处不在之前，Flash/ActiveX/Silverlight/XBap 是这种情况下唯一可行的选择。
诗人：确实，是的。 :-) 对我来说，我只会做 HTML5 或服务器端，但当然可以选择 HTML5，退回到（在此处插入专有技术），退回到服务器端。 :-)
@TJC - 这始终是所有新玩具（如 HTML5 和原生 JSON）真正令人沮丧的方面 - 直到它们无处不在，从生产的角度来看，它们只不过是新奇事物。我们还在支持 IE6 大声呐喊！

【解决方案4】：

您可以在支持来自 W3C 的新 File API 的浏览器上执行此操作，使用 FileReader 接口上的 readAsDataURL 函数并将数据 URL 分配给 src 的 img（之后您可以阅读图像的height 和width）。目前 Firefox 3.6 支持 File API，我认为 Chrome 和 Safari 要么已经支持，要么即将支持。

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

检测浏览器是否支持File API（很简单：if (typeof window.FileReader === 'function')）。
如果是，那太好了，在本地读取数据并将其插入图像中以查找尺寸。
如果没有，则将文件上传到服务器（可能从 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) 样式事件处理程序等表示歉意。

【讨论】：

在通过 iOS Safari 上传图像之前，我使用您的解决方案检查图像的方向（因为 iOS 在上传过程中剥离了很多 exif 数据，例如方向）。我发现如果图像有 display:none（它在纵向模式下混淆了宽度和高度），它的尺寸就会出错。我解决它的方法是给它一个左-10000px左右的绝对位置。不管怎样，谢谢你的工作。它使我免于许多额外的头痛。

【解决方案5】：

不，你不能，文件名和文件内容在 http ~~header~~body 中发送到服务器，javascript 无法操作这些字段。

【讨论】：

有没有其他方法可以在客户端找到维度？
您需要将其上传到其他地方，在服务器中检查并使用 ajax 取回这些值
我不确定flash能不能做到，但是java applet应该能做到。或者看起来 html5 可以做到这一点，请参阅 T.J.克劳德的回答
欢迎！看来flash也可以。你可以看看代码诗人的答案。 flash应该在客户端完成