Веб-заметки и Веб-подсказки

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

На помощь нам приходят новые HTML5-технологии. В JavaScript предусмотрен объект FileReader, с помощью которого можно получить доступ к массиву выбранных файлов files, и узнать их параметры:

• имя файла — свойство name или fileName;
• mime-тип файла — свойство type или mediaType;
• размер файла (в байтах)- свойство size или fileSize;

Пример:
Допустим, у нас есть поле ввода типа «file» для выбора файла, с id равным «myInputFile»
HTML:

<input name="uploaded_file" type="file" id="myInputFile" />

JavaScript:

// получаем ссылку на DOM-элемент поля выбора файлов
var inputFile = document.getElementById("myInputFile");
// проверяет, поддерживает ли веб-браузер объект "FileReader",
// и если - да, то выбран ли файл
if (typeof(FileReader)!="undefined" && inputFile.value!="") {
// получаем доступ к выбранному файлу
var fileObj = inputFile.files[0];
// определяем имя файла с свойства "name" или "fileName"
var fileName = fileObj.name || fileObj.fileName;
// определяем mime-тип файла с свойства "type" или "mediaType"
var fileType = fileObj.type || fileObj.mediaType;
// определяем размер файла с свойства "size" или "fileSize"
var fileSize = fileObj.size || fileObj.fileSize;
// выводим результат
alert(
"Name: " + fileName + "\n" +
"Type: " + fileType + "\n" +
"Size: " + fileSize
);
}


На момент написания статьи, возможность определения типа и размера файлов работала только в браузерах на движках Webkit (Chrome, Safari) и Mozilla (Firefox). В Opera и IE поддержки нет.
Тем не менее, очень рекомендую использовать такие проверки уже сейчас, так как,
во-первых: суммарный процент этих браузеров довольно таки большой,
во-вторых: на мобильных устройствах, где сейчас очень широко используются браузеры на ядре Webkit, экономия трафика очень важна.

Примечание: Спецификация HTML5 предусматривает возможность выбора многий файлов в одном <input/>. Для этого нужно добавить атрибут multiple. Все выбранные файлы будут доступны в массиве files (см. выше).
Пример:

<input name="uploaded_file" type="file" multiple="multiple" />