Получите Размеры изображения с помощью JavaScript во время загрузки файла
У меня есть загрузка файла элемент UI, в котором пользователь загрузит изображения. Здесь я должен проверить высоту и ширину изображения в стороне клиента. Действительно ли возможно найти размер изображения, имеющего только путь к файлу в JS?
Примечание: Если нет, там какой-либо другой способ найти размеры в Стороне клиента?
4 ответа
Вы можете сделать это в браузерах, которые поддерживают новый File API из W3C, используя функцию readAsDataURL в интерфейсе FileReader и назначив URL-адрес данных для src из img (после которые вы можете прочитать высоту и ширину изображения). В настоящее время Firefox 3.6 поддерживает File API, и я думаю, что Chrome и Safari либо уже поддерживают, либо собираются это сделать.
Итак, ваша логика на переходном этапе будет примерно такой:
Определите, поддерживает ли браузер файловый API (это просто:
if (typeof window.FileReader === 'function')).Если это так, отлично, считайте данные локально и вставьте их в изображение, чтобы найти размеры.
Если нет, загрузите файл на сервер (вероятно, отправив форму из окна iframe, чтобы не покидать страницу), а затем опросите сервер, чтобы узнать, насколько велико изображение (или просто запросить загруженное изображение, если вы предпочитаете ).
Править Я уже давно хотел создать пример File API; вот один:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show Image Dimensions Locally</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function loadImage() {
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('imgfile');
if (!input) {
write("Um, couldn't find the imgfile element.");
}
else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = document.createElement('img');
img.onload = imageLoaded;
img.style.display = 'none'; // If you don't want it showing
img.src = fr.result;
document.body.appendChild(img);
}
function imageLoaded() {
write(img.width + "x" + img.height);
// This next bit removes the image, which is obviously optional -- perhaps you want
// to do something with it!
img.parentNode.removeChild(img);
img = undefined;
}
function write(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='imgfile'>
<input type='button' id='btnLoad' value='Load' onclick='loadImage();'>
</form>
</body>
</html>
Отлично работает в Firefox 3.6. Я избегал использовать там какую-либо библиотеку, поэтому извиняюсь за обработчики событий стиля атрибута (DOM0) и тому подобное.
Если вы используете загрузку с флэш-памяти, такую как SWFUpload, вы можете получить всю необходимую информацию, а также несколько загрузок в очереди.
Я рекомендую SWFUpload и никоим образом не связан с ними, кроме как как пользователь.
Вы также можете написать элемент управления silverlight, чтобы выбрать файл и загрузить его.
Нет, нельзя, имя файла и содержимое файла отправляются на сервер в http заголовке body, javascript не может управлять этими полями.
HTML5 определенно является правильным решением здесь. Вы всегда должны разрабатывать код для будущего, а не для прошлого. Лучший способ работать с HTML4-браузерами - это либо отказаться от ухудшенной функциональности, либо использовать Flash (но только если браузер не поддерживает HTML5 file API)
Использование события img.onload позволит вам восстановить размеры файла. Это работает для приложения, над которым я работаю.