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»?
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,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
Работа с 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-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
В данной статье представлена упрощенная реализация загрузки изображений с превью через AJAX с сохранением в базу данных.
Изображения нужно сжимать для ускорения скорости загрузки сайта, но как это сделать? На многих хостингах нет.
Сборник jQuery приемов с textarea — получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя. Для хранимых данных существуют несколько ограничений.
Если добавить атрибут 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
Массив файлов, передаваемых формой выводится в $_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
michadimin, говорит что нет такого индекса(image) в массиве, посмотрите, что вам вообще приходит в $_FILES
echo '
' ; print_r($_FILES); echo '
' ;
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');
Он корректно создаёт запись в БД, однако, если скачать из неё данные(в моём случае это картинка) и если переименовать её в формат картинки — оказывается, что это уже просто набор данных, ни одно приложение не может корректно её прочитать.
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 Автор вопроса
Евгений, ладно, спасибо огромное, без вас я бы реально не разобрался бы.
Пусть картинку в БД я положить и не смогу, что означает, что мне придётся переписывать подгрузку картинок на сайте, но тот факт, что теперь отправка картинок работает — уже радует!