Как получить файл из input type file
Перейти к содержимому

Как получить файл из input type file

  • автор:

File и FileReader

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

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

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

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

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

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

    • name – имя файла,
    • lastModified – таймстамп для даты последнего изменения.

    В этом примере мы получаем объект 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 – чтение завершено (успешно или нет).

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

    • reader.result результат чтения (если оно успешно)
    • reader.error объект ошибки (при неудаче).

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

    Вот пример чтения файла:

       

    FileReader для Blob

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

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

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

    Для Web Worker также доступен FileReaderSync

    Для веб-воркеров доступен синхронный вариант 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 type=»file»?

    Rsa97

    IMHO, никак. Доступ к реальной файловой системе из js-скрипта в браузере сильно ограничен. Максимум — получить реальное имя без полного пути и временное служебное имя вида blob:null/8d02a1cb-72bc-4026-a4f7-d5f1c5d08bce.

    P.S. Странное имя функции «добавить неудачу».

    Ответ написан более двух лет назад
    Комментировать
    Нравится 1 Комментировать
    Stalker_RED @Stalker_RED

    Вы можете получить имя файла из input.value.

    Путь к файлу браузеры не отдают по соображениям безопасности (раньше можно было в фаерфоксе получить, но давно убрали возможность).

    Ответ написан более двух лет назад
    Комментировать
    Нравится 1 Комментировать
    Ответы на вопрос 1
    Софт для автоматизации

    Пути получить можно, но только если выбирается папка.

    Например, введите в консоли:

    var input = document.createElement('input'); input.setAttribute('type', 'file'); input.setAttribute('webkitdirectory', 'true'); input.addEventListener('change', function() < console.log('Выбраны файлы', input.files); console.log('Пути файлов относительно выбранной папки:'); for (var n = 0; n < input.files.length; n++) < console.log(input.files[n].webkitRelativePath); >>); input.click();

    И выберите какую-нибудь папку, где будет хотя бы несколько файлов (любых).

    Также при большом желании можно получить путь в виде Data URL — это такой формат адреса, когда файл сам весь целиком помещается непосредственно в адрес (в ссылку). Ниже пример Data URL, попробуйте его открыть:

    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAOoAAADqAFKWhcCAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAfhQTFRF////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAe7yhUAAAAKd0Uk5TAAECAwQFBgcICQoLDA4PEBESFBYYGRscHR4fICIjJSYnKSosLS8wMTM0Njc8PT5AQUJDRkxNUFJTVFVYWltcX2BhY2RlZmhpa25yc3V2eX1/gIKDhIaIiYqLjI+RlJWXmJmanJ6gpKanqKmtrq+ws7S2t7q7vr/AwsTFxsjKy8zOz9DR0tbX2Nrc3eDh4uTl5ufo6err7e7v8PHy9PX29/j5+vv8/f5wrz1tAAADsklEQVQYGe3BgT+UdxwH8M8dnQ6lzWQzSbnQVNO2ay2ZGqvWFKsZTQptIystWqlLtmWUohRnMi109/k3J8PL6fk9PM/9nu+z7eX9Bv6b0oOnWi8u0XoqmA45vtoIXxOp9UFITi8N9eZAhCdEhZAHEiqoVAEJg1QahIBkmkiG8/JoIg/O20sTe+G8QpoohPOyaSIbzkujiTQ4zxuhUsQLAWNUGoOEASoNQMIdKt2BhE4qdUJCG5XaIKGRSo2QUEOlGkiopFIlJJRTqRwS9lNpPyQUU6kYEvKplA8JWVTKgoQNVNoAETNUmIGMUSqMQsY9KtyDjNtUuA0ZHVTogIwWKrRAxjkqnIOM01Q4DRnHqXAcMg5T4TBk7KPCPmiVWHK5Z+BSZTaW20OFPVguu/LSQM/lkkTYsOsh50SvHfAhRoAKAcTwHbgW5ZyHu2BZ8DkXjdRtxRKZVMjEElvrRrjoeRAWZUwyxo2DSViQQoUULEg6eIMxJjNgTROXC9dvx7wpGprCvO31YS7XBEsSX9DArTI/XnlCQ0/wir/sFg28SIQVARobb9gBoI+G+gDsaBinsQCsCFKpuzw1REOh1PJuKgVhRYAmJsZoaGyCJgKwYv00NZteD0suULMLsCbnJbV6mQOLvqJW1bAqIUSNbibAsuwJajOeBRvKqE0JbGmjJt/Dnk2D1OJ+Kmx6P0INZt6Dbd9Qg5Owb10P43bdizjkTjJO4UzE5XPG6WPEqZ1xaUa83nzMOPQnI24fRmnbVAE0qKdtX0KHpF7a1OmBFnl/0ZbRDGjyBW0JQhdPB21ogD5vjdCy3/3QKEirpvKh1XladAJ6+ftoyXUvNCuYogV/vA3tKmlBCfTz/MxV+wFOyBzjKj3YCEd8wtWJ7IZDvuOq1MApqfe5Cj3r4JiiGa5oMhcOquKKjsJJCTe5gp/grHef0dTTdDislKY+guNaaOI8nLfxAZX6kyFgd4QK04UQ8TUVTkJGYjcNdXkhJOdPGniWBTGf0cCnEPQjX9MKSW884jKDaRD1QZQxIsUQ9i1j1EGa71cu8YsP4t55zEW/pcMFBUOcF0qDKzY1P+Ws4aYUuCa34kS+B2vWrPkf8G4rPdMo6kzpNi8WHQrTBeFD+Mfmq3TJ1c2Y5btL19z1Aaili2qBwghdFClEFV1VhXa6qh1DdNUQhumqYVyhq66gmq6qRlGULooWAWfporMA/P10Tb8fs7Z00SVdWzDHc2yCLpg45sEC384jzRdFNR/Z6cO/wt/U0ZZGPsJ+bAAAAABJRU5ErkJggg==

    Работа с 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 возвращает размер файла в байтах.

    alert($("#file")[0].files[0].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); >);
    Пример:

    Предыдущая запись Стандартные и безопасные шрифты CSS
    Следующая запись Перенаправление с домена на ip-адрес

    Комментарии

    Авторизуйтесь, чтобы добавить комментарий.

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

    Загрузка файлов на сервер PHP

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

    Загрузка изображений с превью AJAX + PHP + MySQL

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

    Автоматическое сжатие и оптимизация картинок на сайте

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

    Работа с Textarea jQuery

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

    Работа с cookie в JavaScript

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

    Contenteditable – текстовый редактор

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

    Как получить файл из формы с input type=»file» в PHP или в целом получить файл любым способом?

    Сам я мало шарю, а о том, что фотки принято загружать на сервер в виде файлов, а не хранить в БД — узнал вот только тогда, когда было уже слишком поздно.

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

    Сессии реализованы стандартными методами PHP — через session_start()

    Вот ссылка на архив с кодом — https://disk.yandex.ru/d/4xTvCCh_ytflgg
    Мне неохота городить тут тонну текста, ввиду того, что я не понимаю, где может крыться решение, а «компилировать в уме», как говорится, — дело то ещё.

    • Вопрос задан 19 февр.
    • 200 просмотров

    1 комментарий

    Простой 1 комментарий

    alexalexes @alexalexes

    но в таком случае в базу данных попадает только название файла, а не сам файл!

    В чем проблема?
    В php есть методы сохранения и загрузки файлов на диск сервера. Берете нужный путь к файлу и вперед — получать бинарник файла.

    Мне неохота городить тут тонну текста, ввиду того, что я не понимаю, где может крыться решение,

    Решение кроется в выстрадании вами этих пунктов:
    1) Запрос и получение бинарника файла от пользователя с использованием объекта FileReader на JS.
    2) Передача через ajax post запроса на сервер, содержащий бинарник файла.
    3) Работа с $_FILES на стороне сервера, и выдергивание файла из временной директории.
    4) Переименовывание файла на уникальное имя и сохранение на постоянное место на диске сервера, а также сохранение исходного имени файла, его пути расположения, размер и других атрибутов в СУБД.
    5) Чтение сведений о файле из СУБД по его id/хешу и передача его содержимого пользователю.

    Сессии реализованы стандартными методами PHP — через session_start()

    Данные в сессии должны быть максимально легковесными, в идеале, должен храниться только идентификатор сессии, пользователя, его статус авторизации, другие токены прав доступа к сторонним API. Все остальное должно храниться в СУБД, что-то на диске сервера. Если нужен кеш, то использовать memcached или redis.

    Решения вопроса 1

    cyber-jet

    Массив файлов, передаваемых формой выводится в $_FILES, ключом является название поля, например input type=»file» name=»avatar», тогда чтобы получить путь к файлу из временной директории:

    Дальше нужно переместить файл туда, где хотите хранить картинки на сервере, а путь записать в базу.

    Ответ написан 19 февр.
    Нравится 1 6 комментариев
    michadimin @michadimin Автор вопроса
    Сделал вот так

    Форма регистрации вот

         Регистрация   

    Личный кабинет

    Notice: Undefined index: image in D:\OSPanelFromTiny10\domains\Vanechka\scripts\register.php on line 10

    cyber-jet

    michadimin, говорит что нет такого индекса(image) в массиве, посмотрите, что вам вообще приходит в $_FILES

    echo '
    ' ; print_r($_FILES); echo '

    ' ;

    cyber-jet

    michadimin, форма должна уметь передавать файлы, надо добавить в тег вот это enctype=»multipart/form-data», прочитайте что написано по ссылке в моем сообщении, там всё написано, и по ссылкам в сообщении выше.

    michadimin @michadimin Автор вопроса

    Евгений, так, спасибо большое, я почти разгадал сея загадку!

    Итак, в данный момент у меня проблема: когда я записываю двоичный файл в БД, то его вес не совпадает с изначальным, собственном как и содержимое

    Как я и говорил — мне нужно помещать картинки непосредственно в саму БД, а не класть в папку с проектом. Знаю, что такой подход не практикуется, но мне нужно именно так в данный момент.

    Я попробовал считывать данные из файла с картинкой в виде обычного текста и пихнуть его в БД — новые записи не добавлялись. И тогда я нашёл функцию mysqli_real_escape_string().

    ' ; print_r($_FILES); echo '

    ' ; echo php_ini_loaded_file()."\n"; move_uploaded_file($_FILES["image"]["tmp_name"], "../img/".$_FILES["image"]["name"]); $filename = '../img/'.$_FILES["image"]["name"]; $text = ''; $fh = fopen($filename, 'r'); while (!feof($fh)) < $line = fgets($fh); $text .= $line . PHP_EOL; >fclose($fh); $sql = "INSERT INTO `Users`(`Name`, `Surname`, `Password`, `Email`, `Image`) VALUES ('".$_POST["name"]."','".$_POST["surname"]."','".$_POST["password"]."','".$_POST["email"]."','".mysqli_real_escape_string($connect, $text)."')"; $connect->query($sql); mysqli_close($connect); header('Location: ../profile.php');

    Он корректно создаёт запись в БД, однако, если скачать из неё данные(в моём случае это картинка) и если переименовать её в формат картинки — оказывается, что это уже просто набор данных, ни одно приложение не может корректно её прочитать.

    cyber-jet

    michadimin, не надо хранить картинку в БД, надо хранить путь к картинке, в виде обычной строки.

    Ещё раз, когда сервер принимает данные формы, то кладёт картинку во временную папку, которая постоянно очищается. Вам нужно скриптом скопировать файл в постоянное место хранения и где будет публичный доступ к ней, и ссылку на этот файл сохранить в базе. Грубо говоря так:

    $sql = "INSERT INTO `Users`(`Name`, `Surname`, `Password`, `Email`, `Imagepath`) VALUES ('".$_POST["name"]."','".$_POST["surname"]."','".$_POST["password"]."','".$_POST["email"]."','".$filename."')"; $connect->query($sql);

    michadimin @michadimin Автор вопроса

    Евгений, ладно, спасибо огромное, без вас я бы реально не разобрался бы.

    Пусть картинку в БД я положить и не смогу, что означает, что мне придётся переписывать подгрузку картинок на сайте, но тот факт, что теперь отправка картинок работает — уже радует!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *