Javascript имя загружаемого файла

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: name property

Returns the name of the file represented by a File object. For security reasons, the path is excluded from this property.

Value

A string, containing the name of the file without path, such as «My Resume.rtf».

Examples

HTML

input type="file" id="filepicker" multiple /> div> p>List of selected files:p> ul id="output">ul> div> 

JavaScript

const output = document.getElementById("output"); const filepicker = document.getElementById("filepicker"); filepicker.addEventListener("change", (event) =>  const files = event.target.files; output.textContent = ""; for (const file of files)  const li = document.createElement("li"); li.textContent = file.name; output.appendChild(li); > >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 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 и 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 .

  Источник

  Работа с Input File JS/jQuery

  Сборник приёмов jQuery для работы с полями загрузки файлов через интерфейс File.

  Во всех примерах используется следующий HTML код:

  И поле для выбора нескольких файлов:

  Очистка поля

  $("#file").val(null); /* или */ document.getElementById("file").value = null;

  Пример:

  Проверка заполнения

  if ($("#file").val() == '') < alert("Файл не выбран"); >else < alert("Файл выбран"); >/* или */ if (document.getElementById("file").value == '') < alert("Файл не выбран"); >else

  Пример:

  Получить количество выбранных файлов

  $('#btn').click(function()< alert($("#file")[0].files.length); >); /* или */ $('#btn').click(function()< alert(document.getElementById("file").files.length); >); 

  Пример:

  Получить имя выбранного файла

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

  alert($("#file")[0].files[0].name); /* или */ alert(document.getElementById("file").files[0].name);

  Пример:

  Имена всех выбранных файлов (multiple)

  let names = []; for(var i = 0; i < $("#file")[0].files.length; i++)< names.push($("#file")[0].files.item(i).name); >alert(names.join("\r\n"));

  Пример:

  Получить тип выбранного файла (MIME)

  File.type возвращает MIMEтип файла.

  alert($("#file")[0].files[0].type); /* или */ alert(document.getElementById("file").files[0].type);

  Пример:

  Типы всех выбранных файлов (multiple)

  let names = []; for(var i = 0; i < $("#file")[0].files.length; i++)< names.push($("#file")[0].files.item(i).type); >alert(names.join("\r\n"));

  Пример:

  Получить размер выбранного файла

  File.size возвращает размер файла в байтах.

  Пример:

  Размер всех выбранных файлов (multiple)

  $('#btn').click(function() < let size = 0 for(var i = 0; i < $("#file")[0].files.length; i++)< size += $("#file")[0].files.item(i).type; >alert(size); >);

  Пример:

  Комментарии

  Другие публикации

  

  В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.

  

  В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных.

  

  Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет.

  

  Сборник jQuery приемов с textarea — получить содержимое, вставить значение, подсчет количества символов и строк и т.д.

  

  Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений.

  

  Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

  Источник

  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.

  Источник