获取远程加载图片的图像URL文件大小

Question

我在jQuery中有一个简单的正则表达式函数，用于向用户发布的图像URL添加图像标签。例如，当用户发布www.example.com/image.jpg时，将添加图像标签，这样用户就可以在不点击链接的情况下看到图像。

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>')); 
});

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

- ramr

---

这可以很容易地通过PHP完成，请参见-https://dev59.com/7G445IYBdhLWcg3w6eXz - ramr

任何关于jquery或JavaScript的答案将不胜感激！ - ramr

可能是重复问题：https://dev59.com/xnM_5IYBdhLWcg3wMgAF - lightbricko

你可以在URL上执行HEAD（而不是GET或POST）并检查Content-Length头。编辑：在查看@lightbricko的上面链接后，我发现那里已经提供了完整的代码建议... ;) - Shadow Man

Answer 1

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   
  }
});

- akhikhl

Answer 2

如果服务器响应图像时包含适当的跨域资源共享（CORS）标头和内容长度标头，则只有这样才能实现您想要的目标。

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

以下是一个jQuery（1.9.1）示例，演示了最终解决方案可能看起来像什么。为使其工作，您需要更新链接到返回正确的CORS标头的服务器或在浏览器上禁用安全性。该示例也在jsfiddle上。

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 https://dev59.com/QnA75IYBdhLWcg3wy8Ui 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();
    })
};

- JesseHenn