JQuery - Атрибуты файла - PullRequest
Новая
       6

JQuery - Атрибуты файла

21 голосов
/ 08 декабря 2011

Попытка получить доступ к атрибутам файла из поля ввода после выбора файла. Попробовал это, но получил ошибку «файл не определен» 

var file = $("#uploadedfile").prop("files")[0];
var fileName = file.fileName;
var fileSize = file.fileSize;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

Ответы [ 5 ]

42 голосов
/ 08 декабря 2011

Если #uploadedfile является вводом с типом "файл": 

var file = $("#uploadedfile")[0].files[0];
var fileName = file.name;
var fileSize = file.size;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

Обычно это срабатывает при изменении события, например: 

$("#uploadedfile").on("change", function(){
   var file = this.files[0],
       fileName = file.name,
       fileSize = file.size;
   alert("Uploading: "+fileName+" @ "+fileSize+"bytes");
   CustomFileHandlingFunction(file);
});

РЕДАКТИРОВАТЬ: Кевин прав в своем комментарии по поводу свойства files, отредактировано!

ИЗМЕНИТЬ СНОВА: правильный синтаксис не 

filename = this.files[0].filename;

но 

filename = this.files[0].name;
filesize = this.files[0].size;

Добавление скрипки, которая должна работать в разных браузерах: http://jsfiddle.net/eq3Qv/

7 голосов
/ 09 января 2014 
<form id = "uploadForm" name = "uploadForm" enctype="multipart/form-data">
    <label for="uploadFile">Upload Your File</label>
     <input type="file" name="uploadFile" id="uploadFile">                  
</form>
<script>
    $('#uploadFile').change(function(){
        var fileName = this.files[0].name;
        var fileSize = this.files[0].size;
        var fileType = this.files[0].type;
        alert('FileName : ' + fileName + '\nFileSize : ' + fileSize + ' bytes');
    });
</script>

Примечание: Чтобы получить имя загружаемого файла, используйте метод jquery val ().

Например: 

var fileName = $('#uploadFile').val();

Я проверял этот код перед публикацией, он отлично работает.!

2 голосов
/ 08 декабря 2011

Чтобы получить имена файлов, используйте: 

var files = document.getElementById('inputElementID').files;

Используя jQuery (поскольку вы уже есть), вы можете адаптировать его к следующему: 

$('input[type="file"][multiple]').change(
    function(e){
        var files = this.files;
        for (i=0;i<files.length;i++){
            console.log(files[i].fileName + ' (' + files[i].fileSize + ').');
        }
        return false;
    });

Демонстрация JS Fiddle .

1 голос
/ 19 июля 2013

Просто попробуйте 

var file = $("#uploadedfile").prop("files")[0];
var fileName = file.name;
var fileSize = file.size;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

У меня сработало

0 голосов
/ 27 июня 2013

Атрибут input.files является функцией HTML5. Вот почему некоторые браузеры ничего не возвращают. Просто добавьте запасной вариант к старой простой input.value (строка), если files не существует.

ссылка: http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-apis.html#dom-input-files

...