使用 jQuery 从响应头中获取图像文件大小

Posted 2023-03-07

【中文标题】使用 jQuery 从响应头中获取图像文件大小

【英文标题】：Get image file size from response headers with jQuery

【发布时间】：2013-07-04 15:15:44

【问题描述】：

我想用 jQuery 获取图像的文件大小。

它几乎就在那里，但我似乎一直在一行上出现错误 谁能帮帮我:)

这是完成所有魔法的完整脚本。这是它的一个jsfiddle

http://jsfiddle.net/UmUvC/

function displayVals() 
    var original = jQuery("#single").val();
    jQuery(".origimg").attr("src", original);
    var width = jQuery(".origimg").width();
    jQuery(".origprev").attr("style", "background: url(" + original + ") no-repeat 0 0 / 100% auto transparent");
    jQuery("p").delay(2000).queue(function() 
        jQuery(this).html("http://src.sencha.io/" + width + "/" + original);
        jQuery(".theimg").attr("src", "http://src.sencha.io/" + width + "/" + original);

        function getImageSizeInBytes(original) 
            var request = new XMLHttpRequest();
            request.open("HEAD", original, false);
            request.send(null);
            var headerText = request.getAllResponseHeaders();
            var re = /Content\-Length\s*:\s*(\d+)/i;
            re.exec(headerText);
            return parseInt(RegExp.$1);
        
        var size_image = getImageSizeInBytes(original);
        jQuery('.size').html(size_image);
    )

jQuery('.go').click(

function() 
    displayVals();
    var original = jQuery("#single").val();
);

【参考方案1】：

同源策略不允许从与发出请求的域不同的域请求资源。例如，位于 jsfiddle.net 上的脚本不能“XMLHttpRequest”位于 src.sencha.io 上的资源。如果服务器发送此标头，则跨域资源共享 (CORS) 允许访问位于不同域的资源：Access-Control-Allow-Origin: your-domain.com

在您的 JSFiddle 演示中，请求 http://fiddle.jshell.net/favicon.png 或 /favicon.png 有效。这是因为 fiddle.jshell.net 允许 jsfiddle.net 的 CORS。

尝试使用任何其他 URL 请求并查看您的控制台。它应该报告：Access-Control-Allow-Origin 不允许 Origin http://fiddle.jshell.net。

【讨论】：

你知道 jQuery 可以通过什么方式获取图像的文件大小吗？它将在哪里更可靠地工作

jQuery/Ajax 单独无济于事。如果您可以控制服务器端代码，请发送带有“*”的 Access-Control-Allow-Origin 标头。 Access-Control-Allow-Origin: *