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

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 上的资源。如果服务器发送此标头，则跨源资源共享（CORS）允许访问位于不同域的资源：访问控制 - 允许 - 来源：your-domain.com

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

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