HTML5 / JS - отображать несколько файлов ввода в div

Question

Я использую замечательную функцию выбора нескольких файлов в HTML5.

<input type="file" id="fileInput" onChange="runTest()" multiple>

Я бы хотел отобразить выбранные имена файлов под полем ввода и сделать так, чтобы он выглядел симпатично с помощью CSS, однако ...

Если я запускаю тестовую функцию JS, которая «предупреждает» меня о значении поля ввода, он показывает только один файл, независимо от того, выбрал ли я 10.

function runTest() {
var fileInput = document.getElementById('fileInput').value;
alert("You selected: "+fileInput);
}

Я делал это, когда у меня было «одно» поле для ввода файла, и оно работало нормально, но теперь оно «множественное», ему это не нравится.

Есть предложения?

Answer 1

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

$('input:file[multiple]').change(
    function(){
        $('ul').append($('<li />').text($(this).val()));
    });

JS Fiddle demo .

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

Чтобы получить доступ к именам файлов (а также дате последнего изменения, размеру файла ...), вы можете (протестировано в Chromium 12 / Ubuntu 11.04) использовать следующее:

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
    });

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

<ч />

Отредактировано , чтобы сделать вышеупомянутое немного более полезным и, надеюсь, демонстративным:

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
        var numFiles = e.currentTarget.files.length;
            for (i=0;i<numFiles;i++){
                fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024;
                filesize = Math.round(fileSize);
                $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output'));
                $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
            }
    });

JS Fiddle demo .

Окончательный кодовый блок обновлен из-за изменений в Webkit, Chrome 24 (хотя, возможно, и более ранних), на nextgentech в комментариях ниже:

$('input:file[multiple]').change(
    function(e){
        console.log(e.currentTarget.files);
        var numFiles = e.currentTarget.files.length;
            for (i=0;i<numFiles;i++){
                fileSize = parseInt(e.currentTarget.files[i].size, 10)/1024;
                filesize = Math.round(fileSize);
                $('<li />').text(e.currentTarget.files[i].name).appendTo($('#output'));
                $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
            }
    });

JS Fiddle demo .

Answer 2

Отличный код, но объект должен быть пустым для каждого изменения:

$('input:file[multiple]').change(
function(e){
    $('#output').empty();
    console.log(e.currentTarget.files);
    var numFiles = e.currentTarget.files.length;
        for (i=0;i<numFiles;i++){
            fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024;
            filesize = Math.round(fileSize);
            $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output'));
            $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
        }
});

Спасибо, Дэвид ...

Answer 3

Установите точку останова на вызове оповещения и посмотрите на содержимое переменной fileInput, посмотрите, есть ли другое свойство, содержащее все имена файлов.