jquery 从文件中获取文件名或文本输入multiple=multiple

w8biq8rn  于 2023-10-17  发布在  jQuery
关注(0)|答案(3)|浏览(112)

我正在尝试样式化我的输入:文件。下面这个问题让我有了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 files selected的内容,这是我试图模仿的行为。
有没有办法找到那个文本,或者得到选中的文件的数量?

ymzxtsji

ymzxtsji1#

使用this.files.length,其中thisfile DOM元素。

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

Demo

v2g6jxz6

v2g6jxz62#

在vanilla js中:

var fileElement = document.querySelector('input[type=file]');
var files = fileElement.files;

或者假设你把input元素 Package 在一个jQuery选择器中.

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

文件应该是一个文件数组。从这里你可以得到文件的数量和它们的名称。适用于最新的Chrome(116)和Firefox(117)

uemypmqf

uemypmqf3#

它对我很有效:

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

var n_img = f_img.name;
DEMO

相关问题