Почему этот код не дает мне правильные размеры изображения, которое должно быть загружено

Question

У меня есть форма для загрузки изображения.Когда пользователь выбирает файл, мне нужно получить ширину и высоту изображения с помощью js / jquery на стороне клиента перед загрузкой.

Я использую этот код для мониторинга, когда пользователь выбирает изображение, которое он хочет загрузитьсо своего локального компьютера

$('#upload').change(function(){
   if($(this).val() != null){
      getImgSize(this);         
   }
});

и вызывает эту функцию, но предупреждает, что ширина и высота 0

function getImgSize(imgSrc){
  var newImg = new Image();
  newImg.src = imgSrc;
  var height = newImg.height;
  var width = newImg.width;
  alert ('The image size is '+width+'*'+height);
}

, и это html-разметка

<input name="upload" id="upload" type="file">

Answer 1

Существует правило, согласно которому JavaScript-код на стороне клиента не может связаться с файловой системой клиента. Из-за этого вы не можете получить полный путь к выбранному файлу из входных данных. Будет возвращено только имя файла, которого недостаточно для работы вашего плана.

Answer 2

Это невозможно, ты пытаешься. Это как @inti говорит, что вы не можете получить доступ к информации о клиенте на клиентских скриптовых языках. Файловый API также следует этим правилам, поскольку важна причина безопасности.

Возможный вариант - использовать серверный скрипт & ajax. С PHP и JQuery

Вы можете использовать, например, этот загрузчик: http://github.com/valums/file-uploader

И небольшой PHP-скрипт вроде этого:

<?

    // use getimagesize to get image information
    list($width, $height, $type, $attr) = getimagesize($_FILES['YOURFILE']);
    json_encode(
        array('width' => $width),
        array('height' => $height)
    );
?>

Answer 3

Это может быть возможно при использовании нового HTML5 File API , но я не уверен, возвращает ли это необходимую вам информацию.Это не очень хорошо поддерживается в большинстве браузеров в настоящее время.Короче говоря, вы не можете сделать это, пока файл не окажется на вашем сервере для чтения.