javascript - 使用 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 上的脚本不能“ ”位于src.sencha.ioXMLHttpRequest上的资源。如果服务器发送此标头，则跨域资源共享 (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 。