image url'nin dosya boyutunu uzaktan yüklenen resimlerin boyutu

Question

Kullanıcıların belirttiği resim URL'lerine resim eklemek için jQuery uygulamasında basit bir normal regex işlevim var. Bir kullanıcı örneğin www.example.com/image.jpg gönderdiğinde, kullanıcı URL'yi tıklamadan görüntüyü görebilmesi için resim etiketi eklenir.

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

Görüntülenebilir olmalarına izin vermeden önce görüntünün dosya boyutunu nasıl kontrol edebilirim? Örneğin, resim dosyası boyutu 5 MB'den büyükse, resim görüntülenmeyecek ve bunun yerine URL gösterilecektir.

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

Yalnızca görüntüler için sunucu yanıtı uygun Çapraz Kökenli Kaynak Paylaşımı (CORS) başlık ve bir içerik uzunlukta başlığını içeriyorsa istediğini başarmak mümkün olacaktır. Ayrıca ajax isteklerinin yedek döngünüzde yerine getirilmesi için gereken süreyi dikkate almanız gerekecektir.

Aşağıda, nihai çözümün neye benzeyebileceğini gösteren bir jQuery (1.9.1) örneği verilmiştir. Çalışması için, doğru CORS başlıklarını döndüren veya tarayıcınızda güvenliği devre dışı bırakan bir sunucuya bağlantıları güncellemeniz gerekecektir. Örnek ayrıca jsfiddle üzerindedir.

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