Javascript получить имя файла

Как получить имя файла из элемента input type = file html, используя JavaScript или JQuery?

В браузере Google Chrome я пробовал несколько вариантов +, и ничто не дает мне значение имени файла, которое было прикреплено, после проверки я отправлю файл. Но всегда его undefined или val() не найден.. Как его решить?

console.log($("input[name='attachment[]']")); /* Output: [ ); /* Output: 0  

$("input[name='attachment[]']").each(function() < var fileName = $(this).val().split('/').pop().split('\\').pop(); console.log(fileName); >); 

​$('input:file').change( function(e)< console.log(e.target.files[0].name); >);​​​ 

$('input:file').change( function(e) < var f = e.target.files, len = f.length; for (var i=0;i>);​ 

document.querySelector('input[type=file]').files 

document.querySelector('input[type=file]').files[0].name 

input type="file" multiple onchange="processSelectedFiles(this)"> 

function processSelectedFiles(fileInput)  var files = fileInput.files; for (var i = 0; i  files.length; i++)  alert("Filename " + files[i].name); > > 

Проверьте результаты ниже:

Спецификация

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

File

Интерфейс File представляет информацию о файлах и предоставляет JavaScript в веб странице доступ к их контенту.

Объекты File как правило извлекаются из объекта FileList , который возвращён как результат пользовательского выбора файлов с помощью элемента, из drag and drop операций DataTransfer объекта, или из mozGetAsFile() API на HTMLCanvasElement . В Gecko, привилегированный код может создать файл представляющий любой локальный файл без пользовательского взаимодействия (см. Gecko notes для получения большей информации).

Объект File - особый вид Blob , и может быть использован в любом контексте так же, как и Blob. В частности, FileReader , URL.createObjectURL() , createImageBitmap() (en-US), и XMLHttpRequest.send() допускают и Blob, и File .

Смотри Использование файлов в веб приложениях для получения более подробной информации и примеров.

Свойства

Интерфейс File также наследует свойства от Blob интерфейса:

Возвращает время последнего изменения файла в миллисекунде с эпохи UNIX (1 января 1970 года в 00:00:00 в часовом поясе UTC).

Возвращает дату последнего изменения файла, на который ссылается объект File.

Возвращает имя файла, на который ссылается объект File.

Возвращает URL адрес, где расположен File .

Методы

Интерфейс не определяет никаких методов, но наследует методы из интерфейса Blob :

Спецификация

Браузерная совместимость

BCD tables only load in the browser

Реализационные заметки

• В Gecko, вы можете использовать этот API изнутри chrome code. Смотрите Использование DOM File API в chrome code, чтобы узнать больше. Чтобы использовать API в chrome code, JSM и Bootstrap, вы должны импортировать его используя Cu.importGlobalProperties(['File']);
• Начиная с Gecko 6.0, привелигированный код (такой как расширение) может передавать объект nsIFile в DOM File конструктор для указания файла в справку.
• Начиная с Gecko 8.0, вы можете использовать new File чтобы создать объект File из XPCOM компонентного кода вместо создания экземпляра nsIDOMFile объекта напрямую. Конструктор принимает Blob , второй аргумент - имя файла. Имя файла может быть любой строкой.

File File( Array parts, String filename, BlobPropertyBag properties );

Смотрите также

• Использование файлов из веб-приложений
• FileReader
• Использование DOM File API в chrome code (для привелигированного кода, запускаемого в Gecko, такого как Firefox дополнения)

Found a content problem with this page?

This page was last modified on 17 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

File и FileReader

Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.

Есть два способа его получить.

Во-первых, есть конструктор, похожий на Blob :

new File(fileParts, fileName, [options])

• fileParts – массив значений Blob / BufferSource /строки.
• fileName – имя файла, строка.
• options – необязательный объект со свойством:
  • lastModified – дата последнего изменения в формате таймстамп (целое число).

  Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.

  Так как File наследует от Blob , у объектов File есть те же свойства плюс:

  В этом примере мы получаем объект File из :

  Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .

  FileReader

  FileReader объект, цель которого читать данные из Blob (и, следовательно, из File тоже).

  Данные передаются при помощи событий, так как чтение с диска может занять время.

  let reader = new FileReader(); // без аргументов

  • readAsArrayBuffer(blob) – считать данные как ArrayBuffer
  • readAsText(blob, [encoding]) – считать данные как строку (кодировка по умолчанию: utf-8 )
  • readAsDataURL(blob) – считать данные как base64-кодированный URL.
  • abort() – отменить операцию.

  Выбор метода для чтения зависит от того, какой формат мы предпочитаем, как мы хотим далее использовать данные.

  • readAsArrayBuffer – для бинарных файлов, для низкоуровневой побайтовой работы с бинарными данными. Для высокоуровневых операций у File есть свои методы, унаследованные от Blob , например, slice , мы можем вызвать их напрямую.
  • readAsText – для текстовых файлов, когда мы хотим получить строку.
  • readAsDataURL – когда мы хотим использовать данные в src для img или другого тега. Есть альтернатива – можно не читать файл, а вызвать URL.createObjectURL(file) , детали в главе Blob.

  В процессе чтения происходят следующие события:

  • loadstart – чтение начато.
  • progress – срабатывает во время чтения данных.
  • load – нет ошибок, чтение окончено.
  • abort – вызван abort() .
  • error – произошла ошибка.
  • loadend – чтение завершено (успешно или нет).

  Когда чтение закончено, мы сможем получить доступ к его результату следующим образом:

  Наиболее часто используемые события – это, конечно же, load и error .

  Как упоминалось в главе Blob, FileReader работает для любых объектов Blob, а не только для файлов.

  Поэтому мы можем использовать его для преобразования Blob в другой формат:

  • readAsArrayBuffer(blob) – в ArrayBuffer ,
  • readAsText(blob, [encoding]) – в строку (альтернатива TextDecoder ),
  • readAsDataURL(blob) – в формат base64-кодированного URL.

  Для веб-воркеров доступен синхронный вариант FileReader , именуемый FileReaderSync.

  Его методы считывания read* не генерируют события, а возвращают результат, как это делают обычные функции.

  Но это только внутри веб-воркера, поскольку задержки в синхронных вызовах, которые возможны при чтении из файла, в веб-воркерах менее важны. Они не влияют на страницу.

  Итого

  File объекты наследуют от Blob .

  Помимо методов и свойств Blob , объекты File также имеют свойства name и lastModified плюс внутреннюю возможность чтения из файловой системы. Обычно мы получаем объекты File из пользовательского ввода, например, через или перетаскиванием с помощью мыши, в событии dragend .

  Объекты FileReader могут читать из файла или Blob в одном из трёх форматов:

  • Строка ( readAsText ).
  • ArrayBuffer ( readAsArrayBuffer ).
  • URL в формате base64 ( readAsDataURL ).

  Однако, во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий URL с помощью URL.createObjectURL(file) и использовать его в теге или . Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.

  А если мы собираемся отправить File по сети, то это также легко, поскольку в сетевые методы, такие как XMLHttpRequest или fetch , встроена возможность отсылки File .

  Источник

  Читайте также:  Javascript document button onclick