【问题标题】:how to get file names from input type file in html 5 using javascript or jquery如何使用javascript或jquery从html 5中的输入类型文件中获取文件名
【发布时间】:2023-03-17 14:31:01
【问题描述】:

下面是我使用 HTML 5 多文件上传的简单代码。我只需要获取所有文件名而不是下面的路径是简单的 javascript 代码

  function getFileNames()
        {
            var path = $('#files').val();
            console.log(' path = ' + path);
        }

和html表单是一样的

<form action='server.php' method='post' enctype='multipart/form-data' target="iframe">
                <input id="files" name='files[]' type='file' multiple>
                <input type='button' onclick="getFileNames()">
</form>

当我按下按钮时,控制台输出为

路径 = 菊花.jpg

这是文件的名字,我想要其余的名称,任何建议,cmets 表示赞赏。 谢谢。

【问题讨论】:

  • 经过大量工作后,我找到了一个不错的解决方案..检查我的答案。

标签: php javascript jquery


【解决方案1】:

好吧,经过大量研究,我得到了解决方案,如果是 input type file,则值存储在 array 中,为 files,键为 name

var files = $('input#files')[0].files;
var names = "";
$.each(files,function(i, file){
    names += file.name + " ";
});
alert(names);

小提琴:http://jsfiddle.net/raj_er04/nze2B/1/

纯javascript

function getFileNames(){
    var files = document.getElementById("files").files;
    var names = "";
    for(var i = 0; i < files.length; i++)
        names += files[i].name + " ";
    alert(names);
}

小提琴:http://jsfiddle.net/raj_er04/nze2B/2/

【讨论】:

    【解决方案2】:
        function getFileNames()
        {
           var files = document.getElementById("files").files;         
        for (var i = 0, f; f = files[i]; i++) {
              console.log(' name= ' + f.name);
    alert(' path = ' + f.name);
            }
        }
    

    【讨论】:

    • 我得到了文件 = document.getElementById('files');剩下的就是你的代码没有做任何事情没有错误也没有日志。
    • 这里是带有控制台日志的完整代码以及警报函数 getFileNames() { var files = document.getElementById("files").files; for (var i = 0, f; f = files[i]; i++) { console.log(' path = ' + f.name);警报('路径='+ f.name); } }
    【解决方案3】:

    代替

    var path = $('#files').val();
    

    遍历数组,使用

    var names = "";
    var path = $('#files').each(function(i, el) {
        names = names + el.val() + ",";
    });
    

    【讨论】:

    • 谢谢,但我在 Firefox 中收到此错误。 el.val 不是函数 [Break On This Error] names = names + el.val() + ",";
    • 使用$(el).val() 而不是el.val()
    • 它只返回一个文件名
    • 什么“数组”? #files 是一个 id 选择器,jQuery 对象中只会有一个元素
    猜你喜欢
    • 2011-06-08
    • 2017-07-17
    • 1970-01-01
    • 2013-02-16
    • 2015-10-04
    • 2019-01-03
    • 1970-01-01
    • 2017-05-08
    • 2016-02-16
    相关资源
    最近更新 更多