10

我帮助管理一个在线论坛，在这个论坛上我们限制了签名的大小。目前我们通过我写的一个简单的 Greasemonkey 脚本来测试它；我们用 a 包裹所有签名<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 检查这些图像。我可以编写一个批处理脚本来扫描所有这些，但我只是想知道是否有办法增强我当前的脚本。

4

10 回答 10

5

实际上，使用 HTML5，这现在是可能的，请在此处
阅读更多信息。

于 2012-06-28T09:14:05.787 回答
5

如您所知，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;

这当然是一种纯粹的客户端方法，可以在服务器端处理最好的事情。

于 2009-07-14T17:48:58.800 回答
3

简短的回答，你不能

另外，检查 jGuru如何在输入类型为文件的表单中从 JavaScript 检查文件大小？

你会发现一些重要的点

那么答案很简单，你不能。

原因：浏览器安全不允许脚本（Javascript/VBScript）甚至小程序和ActiveX 控件从本地硬盘读取文件。如果您的代码由某个证书颁发机构 (CA) 签名，您只能读取文件。现在输入类型“FILE”也没有读取文件的权限。我们对此无能为力，因为这就是 HTML 所说的。因此，由于它无法读取文件，因此无法找到与输入标签关联的文件的大小。由于它无法找到文件大小，因此 JavaScript/VBScript 没有提供返回文件大小的函数。但是，如果您需要查找文件大小，例如为了限制上传到您的网络服务器的文件的大小。然后，一旦用户将文件提交到服务器，您就可以通过计算服务器端的文件内容来做到这一点。

于 2009-07-14T17:49:58.220 回答
2

服务器端验证总是一个更好的选择，但在你的情况下，我可以理解你为什么想要做这个客户端。

此外，似乎其他人可能误读了这个问题，并且丹尼尔想要测试的图像已经上传，在这种情况下，有一个相当简单的方法可以这样做（前提是图像与脚本在同一个域中） .

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 魔法。

于 2009-07-14T18:46:29.917 回答
1

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

于 2009-07-14T17:50:39.483 回答
0

您可以在他们上传文件的 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/。

于 2009-07-14T17:47:24.980 回答
0

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

另一种做法是省略 <img> 标签中的 height 和 width 属性，这样就可以下载完整的图片，然后使用 img.height 和 img.width 来确定下载图片的大小。可以将此代码放入用户的个人资料编辑器页面，作为让某人以 HTML 形式输入其签名和向他们显示其签名预览之间的中间步骤。笨拙，我不得不承认，但可能。

于 2009-07-14T17:50:01.560 回答
0

如果您担心图片太大，请按照 Richy C. 所述设置最大上传大小，但还要在服务器上调整上传图片的大小并使用调整后的版本。

Facebook 对大多数上传的图像执行此操作，以便提供合理大小的图像。甚至在某些（大多数？）情况下将它们转换为 png 格式，这会因为“质量下降”而使创意组发疯。

于 2009-07-14T17:58:28.843 回答
0

您应该能够做的是图像 url 的 AJAX HEAD 请求，它只获取文件的标题而不是内容，因此要快得多。您将返回的标题之一是 Content-Length，它将告诉您图像的大小（以字节为单位）。

更多细节在这里。

于 2009-07-14T18:45:21.587 回答
0

你可以做那个文件 HTML5 JS File API

您可以在我的网络 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.');
}
于 2012-06-26T04:54:33.860 回答