JavaScript中如何确定文件大小？

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检查这些图片。我可以编写批处理脚本来扫描所有这些内容，但我只是想知道是否有一种方法可以增强我的当前脚本。

- Dan Lew

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;

当然，这是一种纯客户端的方法，最好由服务器端处理。

- Keith Adler

---

人们不会将图片上传到我们的服务器，而是链接到其他服务器上的图片。如果他们使用某种动态图片，则我们无法在服务器上验证图片大小。 - Dan Lew

Answer 2

实际上，使用HTML5现在已经成为可能， 可以在此处阅读更多信息：这里。

- funerr

Answer 3

简短地回答，你不能

另外，在jGuru上查看在表单中使用时如何从JavaScript检查文件大小？

你会发现一些重要的要点

很明显，答案非常简单，你不能。

原因：浏览器安全性不允许脚本（Javascript / VBScript）或甚至小程序和ActiveX控件从本地硬盘读取文件。只有通过某些证书颁发机构（CA）签署代码才能读取文件。现在，输入类型“FILE”也没有权限读取文件。我们无法改变HTML中所述的内容。因此，既然它无法读取文件，则无法找到与输入标记相关联的文件的大小。由于它无法找到文件大小，因此JavaScript / VBScript没有公开的函数来返回文件大小。但是，如果您需要找到文件大小，例如为了限制上传到Web服务器的文件大小，则可以通过在用户将其提交到服务器后在服务器端计算文件内容来实现。这就是许多免费电子邮件提供程序（如www.hotmail.com）所做的。

- Amr Elgarhy

---

请包括该页面的相关部分。如果链接失效，您的答案将变得毫无价值。 - George Stocker

@amr-elgarhy，https://dev59.com/lXA85IYBdhLWcg3wCfHm - Dipu R

Answer 4

服务器端验证总是更可靠的选择，但在您的情况下，我可以理解为什么您想在客户端执行此操作。

此外，似乎其他人可能误读了问题，Daniel想要测试的图像已经上传，如果这些图像与脚本位于同一域中，则有一种相当简单的方法来执行此操作。

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

完美。此示例适用于Firefox 3，可能也适用于2。由于您使用Greasemonkey来完成这项任务，因此浏览器兼容性似乎不是一个问题。

我不确定Greasemonkey是否共享相同的XML RPC域限制，但如果所需的图像文件位于与脚本不同的域上，则可能需要研究一些iframe技巧。

- Justin Johnson

Answer 5

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

- marr75

---

我认为你不理解我的问题，我更新了原始帖子以更好地反映手头的任务。（人们不会上传任何东西到服务器，除了指向图像的代码。） - Dan Lew

需要进行大小验证...例如文件管理器和上传中心...如果接收到更大的电影和电视节目，服务器将接收未使用的数据。 - Mohammad Efazati

Answer 6

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

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

(以字节为单位的最大文件大小)。

然而，这是一些浏览器上的"未记录/不支持"项目。在上传后，您最好实际检查服务器上的文件大小。

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

- Richy B.

---

你误解了，人们可以从论坛外部链接图片。事实上，我们并没有自己托管任何签名图片。 - Dan Lew

Answer 7

你可以使用HTML5 JS文件API来实现这个功能。

你可以在我的Web IDE中测试运行下面的代码（但请使用Google Chrome或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.');
}

- Jarod Law Ding Yong

Answer 8

DOM 属性 img.fileSize 将返回所引用的<img>实际文件大小。可以使用 JQuery 或 DOM 'images' 集合来访问 img 对象。然而，这是一个仅适用于 IE 的扩展。

另一种方法是在 <img> 标签中省略高度和宽度属性，以便下载完整图像，然后使用 img.height 和 img.width 来确定下载图像的大小。该代码可以放入用户配置文件编辑器页面作为在让某人将其签名输入为 HTML、然后显示他们签名预览之间的中间步骤。我必须承认，这有些笨重，但是可行的。

- KeithL

---

高度和宽度不是衡量文件大小的好方法，特别是最糟糕的上传者是那些上传动画GIF的人。 - Dan Lew

Answer 9

如果您担心大型图像，可以像Richy C.提到的那样设置最大上传大小，但也要在服务器上调整上传的图像大小并使用调整后的版本。

Facebook对大多数上传的图像都这样做，以便提供合理大小的图像。甚至在某些（大多数？）情况下将它们转换为png格式，这会让创意团队因“失去质量”而感到疯狂。

- Brent Baisley

Answer 10

你应该能够使用 AJAX HEAD 请求图像 URL，这只会获取文件的头部而不是内容，因此速度更快。你将得到其中一个头部的 Content-Length，它将告诉你图像的大小（以字节为单位）。

更多详细信息在此处。

- D'Arcy Rittich