jsFiddle Demo

Question

我有 , 我想在这个输入中获取所有文件名称。我见过一些例子, 但只有第一个文件的名称。

$ ( #basicUploadFile ).live ( change , function () {
    alert($ ( #basicUploadFile ).val());
});

我该怎么做?

Answer 1

var files = $( #basicUploadFile ).prop("files")

files 将是一个文件列表对象。

var names = $.map(files, function(val) { return val.name; });

现在 names 是一组字符串( 文件名)

FileAPI reference
files property reference

Answer 2

jsFiddle Demo

您仍然可以将文件作为 FileList 收藏访问,而无需过度使用 jQuery 。我创建了一个快速的 href="http://jsfiddle.net/r64uV/1/" rel="noreferr" >jsFiddle , 演示如何使用 FileList 和 File 对象从输入中获取信息。这里有一个片断 :

$( #basicUploadFile ).live( change , function ()
{
    for (var i = 0; i < this.files.length; i++)
    {
        alert(this.files[i].name);
        alert(this.files.item(i).name); // alternatively
    }
});

Answer 3

我用这个在控制台显示所有文件名称 :

var input_file = $("#input_file");
input_file.on("change", function () {
     var files = input_file.prop("files")
     var names = $.map(files, function (val) { return val.name; });
     $.each(names, function (i, name) {
          console.log(name);
     });
});

Answer 4

<input name="selectAttachment" id="selectAttachment" type="file" multiple="multiple">
<button class="btn btn-default" onclick="uploadAttachment()" type="submit">Upload</button>


function uploadAttachment() {
                debugger;
                var files = $( #selectAttachment ).prop( files );
                var names = $.map(files, function (val) { return val.name; });
            }

Answer 5

您可以扩展 < strong > File 对象 (例如 File. prototype.toJSON ) 的原型,您也可以访问的文件列表 :

<input id="myFile" type="file">

 var file = document.getElementById( fileItem ).files[0];

有关此文档的更多信息,请查看 :

https:// developmenter.mozilla.org/en-US/docs/Web/API/FileList#Using_the_file_list" rel=“不跟随 Noreferrer'>https://developter.mozilla.org/en-US/docs/Web/API/FileList#Using_the_file_list

check this simple example:

File.prototype.toJSON = function() {
	return {
		 lastModified      : this.lastModified,
		 lastModifiedDate  : this.lastModifiedDate,
		 name              : this.name,
		 size              : this.size,
		 type              : this.type 
	};
}

function getFiles() {
    var files = document.getElementById( myFiles ).files;
    document.getElementById( result ).innerHTML =  <h1>result</h1> 
      + JSON.stringify(files);
}

<input id="myFiles" type="file" multiple onchange="getFiles()" />
<pre id= result ></pre>

祝你好运!

jsFiddle Demo

check this simple example:

友情链接