为什么此代码没有为我提供要上传的图像的正确尺寸答案

【问题标题】：Why this code isn't giving me correct dimensions of image about to be uploaded为什么此代码没有为我提供要上传的图像的正确尺寸
【发布时间】：2011-06-24 19:24:41
【问题描述】：

我有一张图片的上传表单。当用户选择一个文件时，我需要在上传之前在客户端用js/jquery获取图像的宽度和高度。

当用户从本地计算机选择他们想要上传的图像时，我正在使用此代码进行监控

$('#upload').change(function(){
   if($(this).val() != null){
      getImgSize(this);         
   }
});

它调用了这个函数，但它警告宽度和高度为0

function getImgSize(imgSrc){
  var newImg = new Image();
  newImg.src = imgSrc;
  var height = newImg.height;
  var width = newImg.width;
  alert ('The image size is '+width+'*'+height);
}

这是html标记

<input name="upload" id="upload" type="file">

【问题讨论】：

标签： javascript jquery image upload

【解决方案1】：

有一条规则，客户端 JavaScript 代码无法访问客户端文件系统。因此，您无法从输入中获取所选文件的完整路径。它只会返回文件的名称，这不足以让您的计划正常工作。

【讨论】：

【解决方案2】：

可能使用新的HTML5 File API，但我不确定这是否会返回您需要的信息。目前大多数浏览器也没有很好地支持它。简而言之，在文件最终在您的服务器上供您阅读之前，您无法执行此操作。

【讨论】：

【解决方案3】：

你不可能尝试。就像@inti 说您无法以客户端脚本语言访问客户端数据信息。 File API 也遵循此规则，因为安全原因很重要。

一个可能的选择是使用服务器端脚本和 ajax。使用 PHP 和 JQuery

您可以使用例如这个上传器：http://github.com/valums/file-uploader

还有一个像这样的 PHP 脚本：

<?

    // use getimagesize to get image information
    list($width, $height, $type, $attr) = getimagesize($_FILES['YOURFILE']);
    json_encode(
        array('width' => $width),
        array('height' => $height)
    );
?>

【讨论】：