Javascript 获取图像url'；s远程加载图像的文件大小

我在jQuery中有一个简单的正则表达式函数，可以向用户发布的图像URL添加图像标记。 因此，当用户发布例如

www.example.com/image.jpg

时，将添加图像标签，以便用户无需单击URL即可查看图像

var hostname = window.location.hostname.replace(/\./g,'\\.');
var re = new RegExp('(http:\\/\\/[^' + hostname + ']\\S+[\\.jpeg|\\.png|\\.jpg|\\.gif])','g');

$(".texthold ").each(function() {
    $(this).html($(this).html().replace(re, '<a href="$1"><img src="$1" /></a>')); 
});

var hostname=window.location.hostname.replace（/\./g，'\\.'）；
var re=new RegExp（'（http:\/\\/[^'+hostname+']\\S+[\\.jpeg\\.png\\.jpg\\.gif]），'g'）；
$（“.texthold”）.each（函数（）{
$（this.html（$（this.html（）.replace（re.））；
});

在允许查看图像之前，如何检查图像的文件大小？例如，如果图像文件大小大于5MB，则不会显示图像，而是显示URL

var url=…；//在这里，您可以根据regexp结果构建URL
var url = ...; // here you build URL from regexp result

var req = $.ajax({
  type: "HEAD",
  url: url,
  success: function () {
    if(req.getResponseHeader("Content-Length") < 5 * 1048576) // less than 5 MB?
      ; // render image tag
    else
      ; // render URL as text   
  }
});

var req=$.ajax({
类型：“头”，
url:url，
成功：函数（）{
如果（请求getResponseHeader（“内容长度”）<5*1048576）//小于5MB？
；//渲染图像标记
其他的
；//将URL呈现为文本
}
});

只有在图像的服务器响应包含适当的跨源资源共享（CORS）头和内容长度头时，您才能完成您想要的任务

此外，您还需要考虑在替换循环中完成ajax请求所需的时间

下面是一个jQuery（1.9.1）示例，它演示了最终解决方案的外观。要使其工作，您需要更新到服务器的链接，该服务器返回正确的CORS头或禁用浏览器上的安全性。这个例子也在讨论中

var largeImage=”http://eoimages.gsfc.nasa.gov/images/imagerecords/49000/49684/rikuzentakata_ast_2011073_lrg.jpg";
var smallImage=”http://eoimages.gsfc.nasa.gov/images/imagerecords/81000/81258/kamchatka_amo_2013143_tn.jpg";
var url=[largeImage，smallImage]；
var maxSize=5000000；
$.each（URL、函数（索引、值）{
conditionalMarkupUpdater（值，maxSize）；
});
var onShouldBeViewable=函数（）{
警报（'这是一个小图像…显示它'）；
};
var onShouldNotBeViewable=函数（）{
警报（'这是一个大图像…仅提供url'）；
};
var onError=函数（）{
警报（'出现错误…可能是因为CORS问题，请参阅http://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy 及http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/"');
};
函数检查大小（url）{
var sizeChecker=newjquery.Deferred（）；
var onSuccess=函数（数据、文本状态、jqXHR）{
var length=jqXHR.getResponseHeader（'Content-length'）；
如果（！长度）{
sizeChecker.拒收（“未给出尺寸”）；
}否则{
解析（parseInt（length））；
}
};
var onFailure=函数（jqXHR、textStatus、errorshown）{
拒绝（“请求失败”）；
};
$.when（$.ajax({
类型：“头”，
url:url
}))。然后（成功，失败）；
返回sizeChecker.promise（）；
};
函数conditionalMarkupUpdater（url，maxSize）{
$.when（检查大小（url））。然后(
功能（大小）{
如果（大小）可以用PHP轻松完成，请参见-我想jquery或javascript中的任何答案都将非常感谢！可能重复：您可以做一个
头
（而不是
GET
或
POST
）在URL上，检查
内容长度
标题。编辑：在查看@lightbricko的上述链接后，我发现这是建议，包含代码…；）
var largeImage = "http://eoimages.gsfc.nasa.gov/images/imagerecords/49000/49684/rikuzentakata_ast_2011073_lrg.jpg";
var smallImage = "http://eoimages.gsfc.nasa.gov/images/imagerecords/81000/81258/kamchatka_amo_2013143_tn.jpg";
var urls = [largeImage, smallImage];
var maxSize = 5000000;

$.each(urls, function(index, value) {
    conditionalMarkupUpdater(value, maxSize);
});

var onShouldBeViewable = function () {
    alert('This is a small image...Display it.');
};

var onShouldNotBeViewable = function () {
    alert('This is a large image...Only provide the url.');
};

var onError = function() {
    alert('There was an error...likely because of CORS issues see http://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy and http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/"');
};

function checkSize(url) {
    var sizeChecker = new jQuery.Deferred();

    var onSuccess = function (data, textStatus, jqXHR) {
        var length = jqXHR.getResponseHeader('Content-Length');
        if (!length) {
            sizeChecker.reject("No size given");
        } else {
            sizeChecker.resolve(parseInt(length));
        }
    };

    var onFailure = function (jqXHR, textStatus, errorThrown) {
        sizeChecker.reject("Request failed");
    };

    $.when($.ajax({
        type: "HEAD",
        url: url
    })).then(onSuccess, onFailure);

    return sizeChecker.promise();
};

function conditionalMarkupUpdater(url, maxSize) {
    $.when(checkSize(url)).then(

    function (size) {
        if (size <= maxSize) {
            onShouldBeViewable();
        } else {
            onShouldNotBeViewable();
        }
    },

    function (status) {
        onError();
    })
};