Asp.net 在文件上载期间使用Javascript获取图像尺寸_Asp.net_Javascript_Image_Validation_File Upload

Asp.net 在文件上载期间使用Javascript获取图像尺寸

asp.net javascript image validation file-upload

Asp.net 在文件上载期间使用Javascript获取图像尺寸,asp.net,javascript,image,validation,file-upload,Asp.net,Javascript,Image,Validation,File Upload,我有文件上传UI元素，用户将在其中上传图像。在这里，我必须在客户端验证图像的高度和宽度。在JS中是否可以找到只有文件路径的图像的大小注意：如果没有，是否有其他方法在客户端查找维度？不，您不能，文件名和文件内容在http headerbody中发送到服务器，javascript无法操作这些字段。您可以在支持W3C新版本的浏览器上执行此操作，使用FileReader界面上的功能，并将数据URL分配给img的src（之后可以读取图像的高度和宽度）。目前Firefox3.6支持文件API，我认为Chr

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

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

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

您可以在支持W3C新版本的浏览器上执行此操作，使用

FileReader

界面上的功能，并将数据URL分配给

img

的

src

（之后可以读取图像的

高度和宽度）。目前Firefox3.6支持文件API，我认为Chrome和Safari已经或即将支持
所以你在过渡阶段的逻辑是这样的：
检测浏览器是否支持文件API（这很简单：if（typeof window.FileReader=='function'）
）
如果有，很好，在本地读取数据并将其插入图像中以查找尺寸
如果没有，则将文件上载到服务器（可能从iframe提交表单以避免离开页面），然后轮询服务器，询问图像有多大（或者如果愿意，只询问上载的图像）
编辑一段时间以来，我一直想制作一个文件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>


局部显示图像尺寸
身体{
字体系列：无衬线；
}
函数loadImage（）{
var输入、文件、fr、img；
if（typeof window.FileReader！=“函数”）{
写入（“此浏览器尚不支持文件API。”）；
返回；
}
输入=document.getElementById（'imgfile'）；
如果（！输入）{
写（“嗯，找不到imgfile元素。”）；
}
如果（！input.files）{
写入（“此浏览器似乎不支持文件输入的`files`属性。”）；
}
如果（！input.files[0]），则为else{
写入（“请在单击“加载”之前选择一个文件”）；
}
否则{
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=createImage；
fr.readAsDataURL（文件）；
}
函数createImage（）{
img=document.createElement（'img'）；
img.onload=图像加载；
img.style.display='none'；//如果不想显示它
img.src=fr.result；
文件.正文.附件（img）；
}
函数imageLoaded（）{
写入（img.宽度+“x”+img.高度）；
//下一位删除图像，这显然是可选的——可能是您想要的
//用它做点什么！
img.parentNode.removeChild（img）；
img=未定义；
}
函数写入（msg）{
var p=document.createElement（'p'）；
p、 innerHTML=msg；
文件.正文.附件（p）；
}
}

在Firefox 3.6上非常有效。我避免使用那里的任何库，因此对于属性（DOM0）样式的事件处理程序等，我深表歉意。
如果您使用基于flash的上载，例如SWFUpload，您可以获得所需的所有信息以及多个排队上载
我推荐SWFUpload，除了作为用户之外，我与它们没有任何关联
您也可以编写silverlight控件来选择并上传文件。HTML5绝对是正确的解决方案。
你应该永远为未来而不是过去编码。
处理HTML4浏览器的最佳方法是使用降级功能或使用Flash（但仅当浏览器不支持HTML5文件API时）
使用img.onload事件可以恢复文件的维度。
它适用于我正在开发的一个应用程序。
前面的示例还可以，但还远远不够完美
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]);

是否有其他方法可以在客户端找到维度？您需要将其上传到其他地方，在服务器中进行检查，并使用ajaxI将这些值取回。我不确定flash是否可以做到这一点，但java applet应该能够做到。或者看起来html5可以做到这一点，参见T.J.Crowder的回答Welcome！，看起来flash也能做到。你可以看看答案。flash应该在客户端完成当然，这需要用户允许flash。当然，目前我们很多人都会因为所有基于Flash的广告而屏蔽Flash。@TJC同意，但在HTML5普及之前，Flash/ActiveX/Silverlight/XBap是这种情况下唯一可行的选择。诗人：的确，是的。：-）对我来说，我只想做HTML5或服务器端，但肯定有一个选择是HTML5，回退到（此处插入专有技术），回退到服务器端。：-）@TJC——这一直是HTML5和原生JSON等所有新玩具中令人沮丧的一个方面——直到它们无处不在，从生产角度来看，它们只不过是新奇而已。我们仍然支持IE6大声哭出来！酷！但在我的例子中，JS在第二次点击上传按钮后立即写入控制台。怎么了？哦，找到了一个答案：它应该是一个在元素中安装了onclick的onchange事件。无论如何，感谢GajusI在通过iOS Safari上传图像之前使用您的解决方案检查图像的方向（因为iOS在上传过程中会剥离很多exif数据，例如方向）。我发现如果图像显示为“无”（在纵向模式下，它混淆了宽度和高度），那么它的尺寸就错了。我解决这个问题的方法是给它一个绝对位置为左-10000px左右。不管怎样，谢谢你的工作。它使我避免了很多额外的头痛。