Проверьте разрешение изображения в Javascript, PHP

Question

Я хочу проверить разрешение изображения перед загрузкой изображения в PHP через Javascript. В моей форме php, я хочу загрузить два разных изображения, и оба изображения имеют разные ограничения разрешения.

Я пытаюсь следующий код

Код PHP

echo "<form name='add' enctype='multipart/form-data' action='AppActions.php' method='post' onSubmit='return validate_create();'>";
echo "<div class='form_label'>Album Wrapper (Big Image) *</div>";
echo "<div class='form_input'><input type='file' name='bigimage' id='bigimage' />";

echo "<div class='form_label'>Album Wrapper (Small Image) *</div>";
echo "<div class='form_input'><input type='file' name='smallimage' id='smallimage' />;
echo "<input type='submit' name='add' value='Create' class='Buttons' id='add'>";    

В JavaScript

function validate_create()
{
var bigimage = document.getElementById('bigimage');
var smallimage = document.getElementById('smallimage');

var big_img_width = bigimage.clientWidth;
var big_img_height = bigimage.clientHeight;

var small_img_width = smallimage.clientWidth;
var small_img_height = smallimage.clientHeight;

// if condtion to check the condition //
}

Здесь я получаю ширину и высоту для обоих изображений одинаковыми, даже если я выбираю файлы разного размера.

Как это сделать? пожалуйста, предложите мне

заранее спасибо

Answer 1

Когда вы выполняете bigimage.clientWidth или же smallimage.clientWidthвы на самом деле получаете ширину input элементы, а не изображения, которые вы собираетесь загрузить. Кроме того, ваш JavaScript выполняется до фактической загрузки файлов, а разрешение изображений в настоящее время неизвестно. На самом деле, вы даже не знаете, действительно ли файлы являются файлами изображений.

Тип загружаемого файла и разрешение изображения, если оно является изображением, можно определить только после завершения загрузки. Поэтому это должно быть сделано в PHP (ваш AppActions.php скрипт). В PHP вы можете получить доступ к файлу $_FILES глобальный, чтобы увидеть, какие файлы были загружены, их тип и размер. Затем вы можете открыть изображения и использовать imagesx а также imagesy определить размеры.

Если вы должны знать тип файла, прежде чем разрешить загрузку, то я считаю, что ваш единственный выход - использовать флэш-компонент. Например, SWFUploader. JavaScript никогда не может получить доступ к файлу на компьютере пользователя, но Flash может и позволяет вам определить тип и размер файла перед его загрузкой. Тем не менее, ваш сайт будет требовать Flash, который может быть не тем, что вы хотите.

Answer 2

Вы можете использовать новый HTML5 File API в JavaScript, чтобы проверить это. Тем не менее, это не будет использоваться во многих браузерах. Вы можете реализовать это, однако, чтобы пользователи браузеров, которые поддерживают это, могли иметь это преимущество. Посмотрите на этот пост для получения дополнительной информации и примера. Другая возможность - использовать какой-нибудь флэш-загрузчик (просто найдите его).

Вы не можете проверить это заранее в PHP. PHP работает на стороне сервера, и он, очевидно, не может получить доступ к чему-либо на клиентском компьютере.

Answer 3

Используйте getimagesize() для проверки размеров файла. Если это не правильно, бросьте и ошибка. Кроме того, вы можете прочитать размер загруженного изображения с помощью javascript / jquery?