JavaScript 检查文件大小

Question

是否可以继续使用 javascript 检查网络服务器上文件的文件大小（例如 http://www. mysite.com/myfile.js) 大于 0 字节，如果是，则返回 true 或 false 值？

提前致谢！

Answer 1

理论上，您可以使用 XHR 发出 HTTP HEAD 请求并检查响应标头中的 Content-Length。

一个 HEAD 请求与常规 GET 请求相同除了服务器不得返回实际内容。换句话说，服务器会回复您尝试 GET 资源时应有的标头，但随后会停止并且不发送文件。

但是，一些服务器响应HEAD< /code> 请求的 Content-Length 标头为 0，无论文件的实际大小如何。其他人则以文件的大小进行响应。

为了实现这一点，您必须祈祷服务器将文件的实际大小返回给 HEAD 请求。

如果是这样，获取该值很容易：

$.ajax('/myfile.js', {
    type: 'HEAD',
    success: function(d,r,xhr) {
       fileSize = xhr.getResponseHeader('Content-Length');
    }
});

请注意，JSFiddle 的服务器始终返回 0< /code> 当我们 HEAD / 时，即使 / 是 16916 字节。

另请注意 jQuery 的 文档所说的 关于 HTTP 请求类型选项的内容：

要发出的请求类型（“POST”或“GET”），默认为“GET”。注意：这里也可以使用其他HTTP请求方法，例如PUT和DELETE，但并非所有浏览器都支持它们。

我刚刚在 IE 6-10、Firefox 3.6-7、Opera 9-11 和 Chrome 中测试了这个 Fiddle，每个浏览器都正确发出了 HEAD 请求，所以我不会担心这个模糊的问题不兼容声明。更值得关注的是您的服务器如何响应。

Answer 2

Javascript 无法访问文件系统（谢天谢地）所以恐怕不能。

Answer 3

josh3736 给出的想法很棒。只有他给出的代码示例拒绝在我的浏览器（Chrome 20、Firefox 13、IE 8、Opera 12）中工作，原因我不知道。

这是在我的情况下完美运行的一个：

jQuery.ajax
({
    cache: false,
    type: 'HEAD',
    url: 'myfile.js',
    success: function(d,r,xhr){alert('File size is ' + xhr.getResponseHeader('Content-Length') + ' bytes.')},
    error: function(xhr, desc, er){alert('ERROR: "' + xhr.responseText + '"')}
});

我还想注意到，Apache 板载 XAMPP 服务器可以很好地处理 HEAD 请求，但是当然，当在本地主机上运行时，这样的请求被浏览器阻止并显示错误消息：“Access-Control-Allow-Origin 不允许 Origin localhost”（来自 Chrome 的示例）。

Answer 4

IE：
如果您将“文档模式”设置为“标准”，您可以使用简单的 javascript“大小”方法来获取上传文件的大小。

将IE“文档模式”设置为“标准”：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

然后，使用“大小”javascript方法获取上传文件的大小：

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

其他浏览器：
在所有其他浏览器上，您可以毫无问题地使用 javascript 'size' 方法。