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

我帮助在线讨论论坛，并在此论坛上限制签名的大小。目前我们通过我写的一个简单的Greasemonkey脚本来测试它;我们用<div>包裹所有签名，脚本查找它们，然后测量div的高度和宽度。如何确定JavaScript中的文件大小？

现在所有的脚本都要确保签名位于特定的高度/宽度。我想开始自动测量签名内部图像的文件大小，以便脚本可以自动标记在其签名中包含巨大图像的用户。但是，我似乎无法找到一种方法来衡量页面上加载的图像大小。我搜索并发现一个属性特别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检查这些图像。我可以写一个批处理脚本来扫描所有这些，但我只是想知道是否有一种方法来扩充我的当前脚本。

来源

2009-07-14 Daniel Lew

简短的回答，你不能

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

你会发现一些重要的点

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

原因：浏览器安全性不允许脚本（Javascript/VBScript）或甚至小程序和ActiveX控件从本地硬盘读取文件。如果您的代码由某个证书颁发机构（CA）签署，您只能阅读文件。现在输入类型 “FILE”也没有读取文件的权限。我们不能对做任何事情，因为那是HTML所说的。因此，由于不能读取文件，因此无法找到与输入标签关联的文件的大小。由于无法找到文件大小，因此JavaScript/VBScript不提供返回文件大小的函数。但是如果你需要找到文件大小，比方说为了限制上传到你的网络服务器的文件大小。然后，您可以通过对服务器端的文件内容进行计数，一旦用户将提交给服务器。多数免费电子邮件提供商都喜欢 www.hotmail.com。

来源

2009-07-14 17:49:58

请包括该页面中的相关部分。如果该链接死亡，你的答案变得毫无价值。 – 2012-06-26 14:12:37

您可以在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/。

来源

2009-07-14 17:47:24

您误会了，人们可以链接来自论坛外部的图片。实际上，我们不会自己托管任何签名图片。 – 2009-07-14 18:07:01

什么浏览器尊重这一点？ – alex 2010-06-23 15:16:31

这种方法对我不起作用。 – 2014-02-19 22:18:37

如您所知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-14 17:48:58

人们不会将图像上传到我们的服务器。它们链接到其他服务器上的图像。如果他们正在使用某种类型的动态图像，那么我们无法验证服务器上的图像大小。 – 2009-07-14 18:16:53

DOM属性img.fileSize将返回引用的<img>的实际文件大小。访问img对象可以使用JQuery或DOM'图像'集合获得。但是，这是一个IE浏览器唯一的扩展。

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

来源

2009-07-14 17:50:01 KeithL

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

来源

2009-07-14 17:50:39 marr75

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

Facebook会为大部分上传的图像执行此操作，以便为合理尺寸的图像提供服务。甚至在一些（大多数？）情况下将它们转换为png格式，由于“质量丢失”而导致广告素材组坚果。

来源

2009-07-14 17:58:28

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

更多details here。

来源

2009-07-14 18:45:21 RedFilter

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

另外，似乎其他人可能误解了这个问题，并且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);

繁荣。这个例子在FF3和大概2中都有效。既然你使用Greasemonkey来做到这一点，浏览器的兼容性似乎不是一个问题。

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

来源

2009-07-14 18:46:29

你能做到这一点的文件HTML5 JS文件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.'); 
}

来源

2012-06-26 04:54:33

事实上，随着HTML5，这是目前可能的，
阅读更多信息here。

来源

2012-06-28 09:14:05 funerr

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

回答

相关问题