如何使用javascript或jquery从html 5中的输入类型文件中获取文件名

时间:2012-01-24 05:06:37

标签: php javascript jquery

下面是我使用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>

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

path = Chrysanthemum.jpg

这是该文件的第一个名称,我希望其余的名称,任何建议,评论表示赞赏。 谢谢。

3 个答案:

答案 0 :(得分:6)

好吧,所以我在经过大量研究后得到了解决方案,如果input type file,则值array与[{1}} 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/

答案 1 :(得分:1)

    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);
        }
    }

答案 2 :(得分:-1)

而不是

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

循环遍历数组,使用

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