Сборник приёмов jQuery для работы с полями загрузки файлов через интерфейс File.
Во всех примерах используется следующий HTML код:
<input id="file" type="file" name="file">И поле для выбора нескольких файлов:
<input id="file" type="file" name="file[]" multiple>$("#file").val(null);
/* или */
document.getElementById("file").value = null;Пример:
if ($("#file").val() == ''){
alert("Файл не выбран");
} else {
alert("Файл выбран");
}
/* или */
if (document.getElementById("file").value == ''){
alert("Файл не выбран");
} else {
alert("Файл выбран");
}Пример:
$('#btn').click(function(){
alert($("#file")[0].files.length);
});
/* или */
$('#btn').click(function(){
alert(document.getElementById("file").files.length);
});
Пример:
Свойство File.name возвращает имя файла, на который ссылается объект File.
alert($("#file")[0].files[0].name);
/* или */
alert(document.getElementById("file").files[0].name);Пример:
Имена всех выбранных файлов (multiple)
let names = [];
for(var i = 0; i < $("#file")[0].files.length; i++){
names.push($("#file")[0].files.item(i).name);
}
alert(names.join("\r\n"));Пример:
File.type возвращает MIMEтип файла.
alert($("#file")[0].files[0].type);
/* или */
alert(document.getElementById("file").files[0].type);Пример:
Типы всех выбранных файлов (multiple)
let names = [];
for(var i = 0; i < $("#file")[0].files.length; i++){
names.push($("#file")[0].files.item(i).type);
}
alert(names.join("\r\n"));Пример:
File.size возвращает размер файла в байтах.
alert($("#file")[0].files[0].size);Пример:
Размер всех выбранных файлов (multiple)
$('#btn').click(function(){
let size = 0
for(var i = 0; i < $("#file")[0].files.length; i++){
size += $("#file")[0].files.item(i).type;
}
alert(size);
});Пример:
Дополнительно: JS-функция для перевода байты в килобайты, мегабайты.
