Подтвердить что ты не робот

JQuery - получить все имена файлов внутри input = 'file'

У меня есть <input type="file" id="basicUploadFile" multiple="multiple">, и я хочу получить все имена файлов внутри этого ввода. Я видел некоторый пример, но он получает только имя первого файла.

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

Как я могу это сделать? Спасибо.

4b9b3361

Ответ 2

jsFiddle Demo


Вы все равно можете получить доступ к файлам в виде коллекции FileList, не требуя чрезмерного использования jQuery. Я создал быстрый 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
    }
});

Ответ 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);
     });
});

Ответ 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; });
            }

Ответ 5

live был осужден многими версиями назад и удален в v1.9. Вы можете выполнить с .on().

См. Приведенный ниже пример:

$('#basicUploadFile').on('change', function() {
  for (var i = 0; i < this.files.length; i++) {
    console.log(this.files[i].name);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="basicUploadFile" multiple="multiple">

Ответ 6

вы можете расширить прототип файла File.prototype.toJSON, и вы можете получить доступ к файловому списку <input..>:

<input id="myFile" type="file">
 var file = document.getElementById('fileItem').files[0];

Для получения дополнительной информации проверьте эту документацию:

https://developer.mozilla.org/en-US/docs/Web/API/FileList#Using_the_file_list

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>