javascript - 使用 jQuery 从响应 header 获取图像文件大小

Question

我想用 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();
});

Answer 1

同源策略不允许从与发出请求的域不同的域请求资源。例如，位于 jsfiddle.net 上的脚本无法“XMLHttpRequest”位于 src.sencha.io 上的资源。如果服务器发送以下 header :Access-Control-Allow-Origin: your-domain.com

，跨源资源共享 (CORS) 允许访问位于不同域的资源

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

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