JS获取图片文件大小 js获取response header信息_response header中如何看图片多少k-CSDN博客

本文链接：https://blog.csdn.net/mangrandi/article/details/87002515

----------------------------------------------------------------------------

主要参考：

Determining image file size + dimensions via Javascript?

一、主要实现

以下是关于根据图片路径url，来获取图片大小的。基本原理是创建一个 GET HTTP Request类型的ajax请求。网上有种说法是利用HEAD HTTP Request 这种请求用于获取请求所隐含的URL的元信息，而不在响应中传输其任何内容。实际应用中发现其实不可用，在某些未知情况下，通过HEAD HTTP Request 获得的Content-Length比实际的要小。

//js如何获取response header信息

//利用jQuery的ajax请求来完成对head的请求，然后逐个取得需要的信息，
$.ajax({
    type: 'get', //不要使用head类型，某些情况content-length比实际要小
    url : window.location.href,
    async:false,//看自己业务，这里设置同步请求
    cache:false,//不使用缓存,每次都会向服务器请求。这个比较重要，因为浏览器会缓存图片，请求缓存的图片，xhr.getAllResponseHeaders()根本拿不到值
    complete: function( xhr,data ){
        // 获取相关Http Response header
        var wpoInfo = {
            // 服务器端时间
            "date" : xhr.getResponseHeader('Date'),
            // 如果开启了gzip，会返回这个东西
            "contentEncoding" : xhr.getResponseHeader('Content-Encoding'),
            // keep-alive ？ close？
            "connection" : xhr.getResponseHeader('Connection'),
            // 响应长度
            "contentLength" : xhr.getResponseHeader('Content-Length'),
            // 服务器类型，apache？lighttpd？
            "server" : xhr.getResponseHeader('Server'),
            "vary" : xhr.getResponseHeader('Vary'),
            "transferEncoding" : xhr.getResponseHeader('Transfer-Encoding'),
            // text/html ? text/xml?
            "contentType" : xhr.getResponseHeader('Content-Type'),
            "cacheControl" : xhr.getResponseHeader('Cache-Control'),
            // 生命周期？
            "exprires" : xhr.getResponseHeader('Exprires'),
            "lastModified" : xhr.getResponseHeader('Last-Modified')
        };
        // 在这里，做想做的事。。。
    }
});

二、为什么一些字段获取不到值？

明明response header里面有好多值，但是为什么就是获取不到呢？可能原因是因为：Access-Control-Expose-Headers。请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在server端设置Access-Control-Expose-Headers，在里面指定。

三、访问外部图片资源要配置跨域

怎么配置跨域问题，我就不延伸了。百度一下Access-Control-Allow-Origin。

我这里记录一下在ajax请求阿里云oss的图片资源时遇到的一个坑。背景是阿里云oss控制台的配置跨域配置完全正确，但是客户端却总是提示：No 'Access-Control-Allow-Origin' header is present·····的错误。这不就是提示后台没有返回Access-Control-Allow-Origin吗？各种查资料之后发现，真正原因是被浏览器缓存命中了，导致异常。清除浏览器历史所有缓存，再访问测试就ok了