Получить имена файлов или текст из файла ввода несколько = несколько

Question

Я пытаюсь стилизовать мой ввод: файл.Следующий ТАК вопрос дает мне 95% пути туда.Разница в том, что я использую атрибут HTML5 множественный = несколько.

Как стилизовать «входной файл» с помощью CSS3 / Javascript?

JS

        $('#choose-files-button').click(function () {
            $(':file').trigger('click');
        });

        $(':file').change(function () {
            $this = $(this);
            $('#files-selected').text($this.val());
        })

Html

    @using (Html.BeginForm("Upload", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <span id="choose-files-button" class="btn btn-info">Choose Files</span>
        <span id="files-selected"></span>
        <button class="pull-right btn btn-primary" type="submit">Upload</button>
        <div style="height:0; width:0;overflow:hidden;">
            <input type="file" name="files" id="files" multiple="multiple" value="Add Images" />
        </div>
    }

Проблема

Проблема в том, что когда текст выбранных файлов задан, в Chrome отображается только одно имя файла.Я еще не тестировал другие браузеры.Он устанавливает что-то вроде C: /Fakepath/asfd.jpg. Когда вы просто используете <input type="file" name="files" multiple="multiple" />, он говорит что-то вроде 3 файла , что я пытаюсьэмулировать.

Есть ли способ получить к этому тексту или получить количество выбранных файлов?

Answer 1

Используйте this.files.length, где this - элемент file DOM.

$(':file').change(function () {
    $('#files-selected').text(this.files.length + " file selected");
});

Демо

Answer 2

при условии, что входной элемент обернут в селектор jQuery ...

var file = $("input[type=file]");
var files = file[0].files;

файлы должны быть массивом файлов.Отсюда вы можете узнать количество файлов и их названия.Я не уверен, относится ли это к конкретным веб-китам.

Answer 3

у меня работает:

var f_img = $('#f_img')[0].files[0];

var n_img = f_img.name;

DEMO