Question

我有一个input =“file”，允许我选择多个文件。我想让每个没有扩展名的文件显示在我创建的html表中的新表行中。

我有以下代码，可以让我找到input="file"中所选文件的文件名。

<script type="text/javascript">
        $(document).ready(function(){
            $('input[type="file"]').change(function(e){

                var files = $('#fileholder').prop("files")
                var names = $.map(files, function(val) { return val.name; });

               alert(names);
            });
        });
    </script>

请记住，我是jQuery的初学者，但可能会理解大部分代码。

Answer 1

在香草你可以像这样写

（元素存在后，必须调用 JavaScript ）

＆＃13;

var file_input = document.getElementById('file_input'),
    file_table = document.getElementById('file_table');
    
file_input.addEventListener('change', function (e) {
    var i, j, fn;
    // empty table
    while (file_table.rows.length > 0)
        file_table.deleteRow(file_table.rows.length - 1);
    // add new values
    for (i = 0; i < this.files.length; ++i) {
        j = this.files[i].name.lastIndexOf('.');
        if (j > 0)
            fn = this.files[i].name.slice(0, j);
        else
            fn = this.files[i].name;
        file_table.insertRow().insertCell().textContent = fn;
    }
});

＆＃13;

<input id="file_input" type="file" multiple/>

<table id="file_table">
    <tbody>
    </tbody>
</table>

＆＃13;

相关文档

Answer 2

JQuery解决方案看起来像这样：

$('#fileholder').change(function(e){
    var files = $('#fileholder').prop("files")
    var names = $.map(files, function(val) { return val.name; });
    $.each(names, function(index){
      $('#names').append('<tr><td>'+names[index].split('.').slice(0,-1).join('.')+'</td></tr>');
    });
});

<强> https://jsfiddle.net/0gebxudp/4/

在HTML输入文件中添加单个HTML表行中的文件

2 个答案: