Question

我帮助在线管理论坛，在这个论坛上我们限制了签名的大小。目前我们通过我写的一个简单的Greasemonkey脚本来测试它;我们用<div>包装所有签名，脚本查找它们，然后测量div的高度和宽度。

现在所有脚本都确保签名位于特定的高度/宽度。我想开始自动测量签名内图像的文件大小，以便脚本可以自动标记在签名中包含大图像的用户。但是，我似乎无法找到一种方法来测量页面上加载的图像的大小。我搜索并找到了一个特殊的IE属性（element.fileSize），但我显然不能在我的Greasemonkey脚本中使用它。

有没有办法通过JavaScript在Firefox中查找图像的文件大小？

编辑：人们误解了这个问题。论坛本身不托管图像;我们主持人们输入的BBCode作为他们的签名。因此，例如，人们输入：

This is my signature, check out my [url=http://google.com]awesome website[/url]!
This image is cool!  [img]http://image.gif[/img]

我希望能够通过Greasemonkey检查这些图像。我可以写一个批处理脚本来扫描所有这些，但我只是想知道是否有办法扩充我当前的脚本。

Answer 1

如您所知，IE支持图像的fileSize属性。在其他浏览器中没有这样的运气......但是，你应该能够修改这个脚本：

http://natbat.net/2008/Aug/27/addSizes/

它使用JSON读取文件的HTTP头并显示其实际文件大小。这应该可以帮助您阻止人们上传大型动画GIF。

至于获取尺寸：

var img = new Image();
theImage.src = "someimage.jpg";
actualwidth = theImage.width;
actualheight = theImage.height;

这当然是对服务器端最佳处理方式的纯客户端方法。

Answer 2

实际上，使用HTML5，现在可以这样做了阅读更多信息here。

Answer 3

简短回答，你不能

另外，检查jGuru How can you check the file size from JavaScript in a form with an input type of file?

你会发现一些重点

答案很简单，你不能。

原因：浏览器安全性不允许脚本   （Javascript / VBScript）甚至applet和ActiveX控件来阅读   来自本地硬盘的文件。如果您的代码，您只能读取文件   由一些证书颁发机构（CA）签署。现在是输入类型   “FILE”也没有读取文件的权限。我们做不到   关于那个的任何事情，因为这就是HTML所说的。所以既然它不能   读取文件时，无法找到输入文件的大小   标签是关联的。由于找不到文件大小，所以没有   JavaScript / VBScript公开的函数返回文件大小。但   如果你需要找到文件大小，请说是为了限制大小   上传到您的Web服务器的文件。然后你可以这样做   一旦用户提交，计算服务器端的文件内容   它到服务器。这就是许多免费电子邮件提供商所喜欢的   www.hotmail.com做。

Answer 4

服务器端验证总是更好的选择，但在您的情况下，我可以看到您为什么要这样做客户端。

此外，似乎其他人可能误读了这个问题，并且丹尼尔想要测试的图像已经上传，在这种情况下有一种相当简单的方法（如果图像与脚本）。

var getFileSize = function(address, responseHandler) {
  var req = new XMLHttpRequest();  

  req.open('head', address, true);  
  req.onreadystatechange = responseHandler;
  req.send(null);  
}

var responseHandler = function(resp) {
  if ( this.readyState == 1 ) {
    this.abort();
  }
  console.log(this.getResponseHeader("Content-length"));
};

getFileSize("http://stackoverflow.com/content/img/so/logo.png", responseHandler);

动臂。这个例子适用于FF3，可能是2个。由于你使用Greasemonkey来实现这一点，浏览器兼容性似乎不是问题。

我不确定Greasemonkey是否共享相同的XML RPC域限制，但如果您需要的图像文件位于与脚本不同的域中，那么您可能需要考虑使用一些iframe魔法。

Answer 5

客户端验证不足以实现您的目标。一个简单的帖子请求将允许用户上传他们想要的任何图像，无论您为他们提供什么样的HTML或JavaScript。

Answer 6

您可以在HTML中设置上传文件的最大文件大小。

<input type="hidden" name="MAX_FILE_SIZE" value="10000000">

（max_file_size，以字节为单位）。

但是，这是某些浏览器的“未记录/不支持”项。最好在上传后检查服务器上的文件大小。

您还可以使用Flash或Java小程序来处理上传并检查文件大小。有关示例，请参阅http://www.masrizal.com/product/custom%20tag/cf_flashmultiupload/docs%20&%20examples/example.cfm和http://www.saschawenning.de/labor/flash8/fileUpload/。

Answer 7

DOM属性img.fileSize将返回引用的＆lt; img＆gt;的实际文件大小。可以使用JQuery或DOM'images'集合来获取对img对象的访问。但是，这只是IE扩展。

另一种方法是省略＆lt; img＆gt;中的高度和宽度属性。标记，以便下载完整图像，然后使用img.height和img.width来确定下载图像的大小。此代码可以放入用户的配置文件编辑器页面，作为让某人以HTML格式输入其签名，然后向其显示其签名预览的中间步骤。 Clunky，我不得不承认，但可能。

Answer 8

如果您担心图像太大，请设置Richy C.提到的最大上传大小，同时调整服务器上传的图像大小并使用调整后的版本。

Facebook为大多数上传的图片执行此操作，以便提供合理大小的图像。甚至在一些（大多数？）案例中将它们转换为png格式，这会因为“质量下降”而使创意群体疯狂。

Answer 9

你应该能做的是图片网址的AJAX HEAD请求，它只获取文件的标题而不是内容，所以速度要快得多。您将获得的其中一个标题是Content-Length，它将以字节为单位告诉您图像的大小。

更多details here。

Answer 10

您可以执行该文件HTML5 JS File API

您可以在我的网络IDE中测试运行以下代码（但请使用谷歌浏览器或FF）： http://codesocialist.com/#/?s=bN

以下代码为您检索文件类型和文件大小：）

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {

    // Great success! All the File APIs are supported.
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes </strong></li>');
        }

        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }

    // Bind Event Listener
    document.getElementById('files').addEventListener('change', handleFileSelect, false);

} else {
    alert('The File APIs are not fully supported in this browser.');
}

如何在JavaScript中确定文件大小？

10 个答案: