イメージURLを取得するリモートにロードされたイメージのファイルサイズ

Question

ユーザーが投稿したイメージURLに画像タグを追加するjQueryで簡単な正規表現関数があります。 ユーザーがたとえば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>')); 
}); 

イメージのファイルサイズを確認できるようにするにはどうすればよいですか？たとえば、イメージファイルのサイズが5MBを超えると、イメージは表示されず、代わりにURLが表示されます。

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

Answer 2

あなたは画像のみのためのサーバの応答が適切なクロスオリジンリソース共有（CORS）ヘッダとContent-Lengthヘッダが含まれている場合、あなたが望むものを達成することができるようになります。

さらに、交換ループで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 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(); 
    }) 
};