проверка размера изображения перед загрузкой

Question

Я заметил при загрузке профиля pic в Twitter, чтобы его размер был проверен перед загрузкой. Может ли кто-нибудь указать мне на такое решение?

Благодаря

Answer 1

Если вы проверяете размер файла, который вы можете использовать что-то вроде uploadify, чтобы проверить размер файла перед загрузкой.

Возможно, необходимо проверить фактические размеры файла (высота/ширина) на сервере.

Answer 2

Я думаю, что это невозможно, если вы не используете вспышку. Вы можете использовать uploadify или swfupload для таких вещей.

Answer 3

Я проверил этот код в хроме, и он отлично работает.

var x = document.getElementById('APP_LOGO'); // get the file input element in your form 
var f = x.files.item(0); // get only the first file from the list of files 
var filesize = f.size; 
alert("the size of the image is : "+filesize+" bytes"); 

var i = new Image(); 
var reader = new FileReader(); 
reader.readAsDataURL(f); 
i.src=reader.result; 
var imageWidth = i.width; 
var imageHeight = i.height; 
alert("the width of the image is : "+imageWidth); 
alert("the height of the image is : "+imageHeight); 

Answer 4

Что-то, как это должно справиться с формами нагруженных асинхронно, входы с или без «несколько» установить и избежать условий гонки, которые происходят при использовании FileReader.readAsDataURL и Image.src.

$('#formContainer').on('change', '#inputFileUpload', function(event) { 
    var file, _fn, _i, _len, _ref; 
    _ref = event.target.files; 
    _fn = function(file) { 
    var reader = new FileReader(); 
    reader.onload = (function(f) { 
     return function() { 
     var i = new Image(); 
     i.onload = (function(e) { 
      var height, width; 
      width = e.target.width; 
      height = e.target.height; 
      return doSomethingWith(width, height); 
     }); 
     return i.src = reader.result; 
     }; 
    })(file); 
    return reader.readAsDataURL(file); 
    }; 
    for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
    file = _ref[_i]; 
    _fn(file); 
    } 
}); 

Примечание: Нуждается JQuery, HTML5, крюки структуры, как:

<div id="formContainer"> 
    <form ...> 
    ... 
    <input type="file" id="inputFileUpload"></input> 
    ... 
    </form> 
</div> 

Answer 5

Вы должны проверить изображения ширина и высота когда OnLoad изображения.

var img = new Image; 
img.src = URL.createObjectURL(file); 
img.onload = function() { 
    var picWidth = this.width; 
    var picHeight = this.height; 

    if (Number(picWidth) > maxwidth || Number(picHeight) > maxheight) { 
     alert("Maximum dimension of the image to be 1024px by 768px"); 
     return false; 
    } 
}