Uzyskiwanie rozmiaru pliku URL zdjęcia zdalnie załadowanych obrazów

Question

Mam proste wyrażenie regularne w jQuery, aby dodać tag obrazu do URL-a graficznego opublikowanego przez użytkowników. Dzięki temu, gdy użytkownik napisze na przykład www.example.com/image.jpg, zostanie dodany tag obrazu, aby użytkownik mógł zobaczyć obraz bez kliknięcia adresu 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>')); 
}); 

Jak mogę sprawdzić rozmiar pliku obrazu, zanim pozwoli mu być widoczne? Tak więc, jeśli na przykład rozmiar pliku obrazu jest większy niż 5 MB, obraz nie zostanie wyświetlony, a zamiast niego pojawi się adres 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

Będziesz tylko w stanie osiągnąć to, co chcesz, jeśli odpowiedź serwera dla obrazów zawiera odpowiednią Cross-Origin Resource Sharing (CORS) nagłówek i nagłówek Content-Length.

Dodatkowo musisz wziąć pod uwagę czas potrzebny na wypełnienie zapytań ajaxowych w pętli zastępczej.

Poniżej znajduje się przykład jQuery (1.9.1), który pokazuje, jak mogło wyglądać ostateczne rozwiązanie. Aby to działało, musisz zaktualizować linki do serwera, który zwraca odpowiednie nagłówki CORS lub wyłączyć zabezpieczenia w przeglądarce. Przykład znajduje się również pod adresem 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(); 
    }) 
};