【问题标题】:Javascript check file sizeJavascript 检查文件大小
【发布时间】:2011-12-16 02:46:17
【问题描述】:

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

提前致谢!

【问题讨论】:

  • 你将需要一个简单的 ajax 请求和一个返回请求文件大小的服务器端端点......没有它,默认情况下它是不可能的
  • @sra:那不是necessarily true。

标签: javascript filesize


【解决方案1】:

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

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

但是,some severs respond 到带有Content-Length 标头的HEAD 请求0,无论文件的实际大小如何。其他人则以文件的大小响应。

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

如果有,getting that value is easy:

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

请注意,当我们 HEAD / 时,JSFiddle 的服务器总是返回 0,即使 / 是 16916 字节。

还要注意 jQuery 的 docs say 关于 HTTP 请求类型选项:

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

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

【讨论】:

    【解决方案2】:

    Javascript 无法访问文件系统(谢天谢地)所以恐怕没有。

    【讨论】:

    • +1,如果它在浏览器中运行,就不用多说了。但我认为值得一提的是,如果 JS 在浏览器之外运行,因为规范允许文件系统活动,这一定是不正确的
    • 抱歉,我没有说清楚我想检查网络上文件的文件大小。我已经编辑了这个问题,希望现在更清楚了,这可能吗?
    • @sra 对您的实际问题的评论是我认为在这种情况下的最佳答案
    【解决方案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 请求,但是当然,当在 localhost 上运行时,这样的请求会被浏览器阻止并显示错误消息:“Origin localhost is not Access-Control-Allow-Origin 允许”(来自 Chrome 的示例)。

    【讨论】:

      【解决方案4】:

      IE: 如果您将 Ie 'Document Mode' 设置为 'Standards',则可以使用简单的 javascript 'size' 方法来获取上传文件的大小。

      将即“文档模式”设置为“标准”:

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

      然后,使用 'size' javascript 方法获取上传文件的大小:

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

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

      【讨论】:

      • 无论您添加什么元标记,这在 IE9 或更早版本中都不起作用。
      猜你喜欢
      • 2012-02-09
      • 2018-04-07
      • 2011-06-03
      • 2015-08-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多