Question

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

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

Answer 1

您可以在支持W3C新File API的浏览器上执行此操作，使用FileReader界面上的readAsDataURL功能并将数据网址分配给src img之后（之后您可以阅读图片的height和width）。目前Firefox 3.6支持File API，我认为Chrome和Safari已经或即将开始。

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

检测浏览器是否支持文件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）样式事件处理程序等道歉。

Answer 2

上一个例子是好的，但它远非完美。

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

Answer 3

不，您不能将文件名和文件内容发送到http ~~header~~ 正文中的服务器，javascript无法操纵这些字段。

Answer 4

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

我建议使用SWFUpload，除了作为用户之外，我绝不会与它们相关联。

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

Answer 5

HTML5绝对是正确的解决方案。你应该总是为未来而不是过去编码。处理HTML4浏览器的最佳方法是退回降级功能或使用Flash（但仅当浏览器不支持HTML5文件API时）

使用img.onload事件可以恢复文件的尺寸。它正在为我正在开发的应用程序工作。

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

5 个答案: