Bild-URL-Datei von ferngeladenen Bildern erhalten

Question

Ich habe eine einfache Regex-Funktion in jQuery, um Bild-URLs, die von Benutzern gepostet wurden, ein Bild-Tag hinzuzufügen. Wenn ein Benutzer beispielsweise www.example.com/image.jpg posten wird, wird das Bild-Tag hinzugefügt, so dass der Benutzer das Bild sehen kann, ohne auf die URL zu klicken.

Wie kann ich die Dateigröße des Bildes überprüfen, bevor es sichtbar sein kann? Wenn zum Beispiel die Bilddateigröße größer als 5 MB ist, wird das Bild nicht angezeigt und stattdessen wird die URL angezeigt.

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

Sie in der Lage, nur zu erreichen, was Sie für die Bilder, wenn die Server-Antwort-Header wollen den entsprechenden Cross-Origin Resource Sharing (CORS) Header und einen Content-Length enthält.

Zusätzlich müssen Sie die Zeit berücksichtigen, die benötigt wird, damit die Ajax-Anforderungen in Ihrer Ersatzschleife erfüllt werden.

Unten ist ein jQuery (1.9.1) Beispiel, das zeigt, wie die endgültige Lösung aussehen könnte. Damit es funktioniert, müssen Sie die Links zu einem Server aktualisieren, der korrekte CORS-Header zurückgibt oder die Sicherheit in Ihrem Browser deaktiviert. Das Beispiel ist auch auf 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(); 
    }) 
};