从文件输入获取文件名或文本倍数=多个

Question

我正在尝试设置我的输入：文件。以下SO问题让我在95％的路上。不同之处在于我使用的是HTML5 multiple = multiple属性。

How to style "input file" with 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");
});

<强> Demo

Answer 2

假设您将input元素包装在jQuery选择器中......

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

文件应该是一个文件数组。从这里你可以得到文件的数量和它们的名称。我不确定这是否是特定于webkit的。

Answer 3

它对我有用：

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

var n_img = f_img.name;

DEMO