Input type file как получить путь файла
Обновлено: 07.07.2024
Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.
Есть два способа его получить.
Во-первых, есть конструктор, похожий на Blob :
- fileParts – массив значений Blob / BufferSource /строки.
- fileName – имя файла, строка.
- options – необязательный объект со свойством:
- lastModified – дата последнего изменения в формате таймстамп (целое число).
Во-вторых, чаще всего мы получаем файл из <input type="file"> или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.
Так как File наследует от Blob , у объектов File есть те же свойства плюс:
- name – имя файла,
- lastModified – таймстамп для даты последнего изменения.
В этом примере мы получаем объект File из <input type="file"> :
Через <input> можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .
FileReader
FileReader объект, цель которого читать данные из Blob (и, следовательно, из File тоже).
Данные передаются при помощи событий, так как чтение с диска может занять время.
- 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 .
Вот пример чтения файла:
Как упоминалось в главе 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 из пользовательского ввода, например, через <input> или перетаскиванием с помощью мыши, в событии dragend .
Объекты FileReader могут читать из файла или Blob в одном из трёх форматов:
- Строка ( readAsText ).
- ArrayBuffer ( readAsArrayBuffer ).
- URL в формате base64 ( readAsDataURL ).
Однако, во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий URL с помощью URL.createObjectURL(file) и использовать его в теге <a> или <img> . Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.
но filePath var содержит only name выбранный файл, а не full path .
@nauphal спасибо за комментарий, но есть ли другой способ получить полный путь к выбранному файлу? Если вы хотите получить путь к файлу на сервере (например, создав веб-интерфейс для утилиты командной строки, запускаемой на сервере), вы всегда можете построить относительный путь, отправив его через в качестве <option> и используйте виджет дерева или введите его вперед, чтобы позволить пользователю выбрать его и затем сервер обработать файл.
Я искал его в сети, но кажется, что по соображениям безопасности браузеры (FF, Chrome) просто дают имя файла.
Есть ли другой способ получить полный путь к выбранному файлу?По соображениям безопасности браузеры не допускают этого, т. Е. JavaScript в браузере не имеет доступа к файловой системе, однако, используя файловый API HTML5, только Firefox предоставляет mozFullPath свойство, но если вы пытаетесь получить значение, он возвращает пустую строку:
Так что не трать свое время.
редактировать: если вам нужен путь к файлу для чтения файла, вы можете использовать вместо него FileReader API. Вот связанный вопрос по SO: Предварительный просмотр изображения перед его загрузкой.
Посмотрите эту ссылку, поскольку она помогла мне с той же проблемой. И все же он получил мне URL для пути для отправки на сервер @AmirTugi Это решение читает файл. Это не имеет никакого отношения к пути файла в файловой системе пользователя.Это даст вам временный путь, а не точный путь, вы можете использовать этот скрипт, если вы хотите показать выбранные изображения, как в этом примере jsfiddle (попробуйте это, выбрав изображения, а также другие файлы): -
Это не совсем то, что вы искали, но может быть, это может вам где-нибудь помочь.
Нужно только поместить содержимое «tmppath» в адресную строку браузера? Я пытался, и это не работает. @naXa хорошо, я отредактирую свой комментарий выше. ну, к сожалению, я не могу отредактировать свой комментарий В 3-й строке вы должны использовать переменную tmppath вместо URL.createObjectURL (event.target.files [0]), это более оптимизировано.Вы не можете сделать это - браузер не допустит этого из-за проблем безопасности.
Когда файл выбирается с использованием объекта input type = file, значение свойства value зависит от значения параметра безопасности «Включить путь к локальному каталогу при загрузке файлов на сервер» для зоны безопасности, используемой для отображения веб-страницы. содержащий входной объект.
Полное имя файла выбранного файла возвращается, только если этот параметр включен. Когда параметр отключен, Internet Explorer 8 заменяет локальный диск и путь к каталогу строкой C: \ fakepath \, чтобы предотвратить несоответствующее раскрытие информации.
И другие
Вы пропустили ); это в конце функции изменения события.
Также не создавайте функцию для события изменения, просто используйте ее, как показано ниже,
Попробовал ваш код, но он дал мне неверный путь. мой файл находится в D каталоге, но значение приходит C:\fakepath\test.xls C: \ fakepath \ fileName.xls . кто-нибудь знает, как решить эту проблему?Ты не можешь Безопасность останавливает вас за то, что вы ничего не знаете о файловой системе клиентского компьютера - она может даже не иметь ее! Это может быть MAC, ПК, планшет или интернет-холодильник - вы не знаете, не можете знать и не будете знать. Если вы укажете полный путь, это может дать вам некоторую информацию о клиенте, особенно если это, например, сетевой диск.
Фактически вы можете получить его при определенных условиях, но для него требуется элемент управления ActiveX, и он не будет работать в 99,99% случаев.
В любом случае вы не можете использовать его для восстановления файла в исходном месте (так как у вас нет абсолютно никакого контроля над тем, где хранятся загружаемые файлы, или даже если они хранятся), так что на практике это не очень полезно для вас в любом случае.
У нас есть простая форма HTML с <input type="file"> , как показано ниже:
В IE7 (и, вероятно, во всех известных браузерах, включая старый Firefox 2), если мы отправляем файл, например '//server1/path/to/file/filename', он работает правильно и дает полный путь к файл и имя файла.
У меня нет подсказки, как преодолеть эту "новую функцию", потому что она заставляет все формы загрузки в моем веб-браузере перестать работать с Firefox 3.
Может ли кто-нибудь помочь найти одно решение для получения пути к файлу как в Firefox 3, так и в IE7?
ОТВЕТЫ
Ответ 1
В IE7 (и, вероятно, во всех известных браузерах, включая старый Firefox 2), если мы отправляем файл, например '//server1/path/to/file/filename', он работает правильно и дает полный путь к файлу, а имя файла.
У меня нет подсказки, как преодолеть эту "новую функцию", потому что она заставляет все формы загрузки в моем веб-браузере перестать работать с Firefox 3.
Здесь большое недоразумение. Зачем вам нужен полный путь к файлу на стороне сервера? Представьте, что я клиент, и у меня есть файл в C:\path\to\passwords.txt , и я даю вам полный путь к файлу. Как бы вы, как сервер, когда-либо получали его содержимое? У вас есть открытое TCP-соединение с моей локальной файловой системой на диске? Проверили ли вы функцию загрузки файлов, когда вы привели ваш webapp в производство на другой серверной машине?
Он будет работать только тогда, когда и клиент, и сервер будут работать на физически одной и той же машине, потому что у вас будет доступ к той же файловой системе на жестком диске. Это произойдет только в том случае, если вы локально разрабатываете свой веб-сайт, и поэтому веб-браузер (клиент) и веб-сервер (сервер) по совпадению запускаются на одном компьютере.
Что полный путь к файлу отправляется в MSIE и других древних веб-браузерах из-за ошибки безопасности. Параметры W3 и RFC2388 имеют никогда не упоминался, чтобы включить полный путь к файлу. Только имя файла. Firefox корректно выполняет свою работу.
Чтобы обрабатывать загруженные файлы, вам не нужно знать полный путь к файлу. Вам лучше всего заинтересовать полный файл содержимое, которое клиент уже отправил на сервер в тело запроса в случае запроса multipart/form-data . Измените форму, чтобы она выглядела следующим образом, как указано в RFC2388:
Как получить содержимое загруженного файла на стороне сервера зависит от языка программирования на стороне сервера, который вы используете.
Java/JSF: вы хотите использовать компонент <h:inputFile> или любой другой компонент загрузки файлов, предоставляемый библиотекой компонентов, которую вы используете. Также здесь вы хотите получить содержимое файла в стиле InputStream . См. этот ответ для примера.
PHP: содержимое файла уже неявно хранится на временном диске. Вы хотите использовать функцию move_uploaded_file() , чтобы переместить ее в нужное место. См. Также Руководство по PHP.
Всякий раз, когда вы хотите получить часть имени файла загруженного файла, вы должны обрезать полный путь от имени файла. Эта информация совершенно неактуальна для вас. Также см., Например, Apache Commons FileUpload FAQ entry
Почему FileItem.getName() возвращает весь путь, а не только имя файла?
Internet Explorer предоставляет весь путь к загруженному файлу, а не только имя базового файла. Поскольку FileUpload предоставляет именно то, что было предоставлено клиентом (браузером), вы можете удалить эту информацию о пути в своем приложении.
Ответ 2
Для предварительного просмотра в Firefox работает это - вложение - это объект элемента привязки в первом примере:
Ответ 3
На самом деле, незадолго до выхода FF3 я сделал несколько экспериментов, и FF2 отправляет только имя файла, как и Opera 9.0. Только IE отправляет полный путь. Поведение имеет смысл, потому что сервер не должен знать, где пользователь хранит файл на своем компьютере, это не имеет отношения к процессу загрузки. Если вы не пишете приложение интрасети и не получаете файл по прямому сетевому доступу!
Что изменилось (и что реальная точка элемента ошибки вы указываете) заключается в том, что FF3 больше не разрешает доступ к файловому пути из JavaScript. И не позволяйте type/paste пути туда, что более раздражает для меня: у меня есть расширение оболочки, которое копирует путь файла из Windows Explorer в буфер обмена, и я использовал его много в такой форме. Я решил проблему, используя расширение DragDropUpload. Но я боюсь, что это будет не по теме.
Интересно, что делают ваши веб-формы, чтобы перестать работать с этим новым поведением.
[EDIT] После прочтения страницы, связанной с Майком, я вижу, действительно, использует путь к интрасети (например, для идентификации пользователя) и локального использования (покажите предварительный просмотр изображения, локальное управление файлами). Пользователь Jam-es, кажется, обеспечивает обходной путь с помощью nsIDOMFile (еще не пробовал).
Ответ 4
Мы не можем получить полный путь к файлу в FF3. Нижеследующее может быть полезно для настройки компонентов файла.
Ответ 5
Один крайне уродливый способ разрешить это: вручную введите каталог в текстовое поле и добавьте его обратно к значению файла в JavaScript.
Беспокойство. но это зависит от уровня пользователя, с которым вы работаете, и обойти проблему безопасности.
Ответ 6
Просто вы не можете сделать это с помощью FF3.
Другим вариантом может быть использование апплета или других элементов управления для выбора и загрузки файлов.
Ответ 7
Посмотрите XPCOM, может быть что-то, что вы можете использовать, если Firefox 3 используется клиентом.
Ответ 8
Это пример, который может работать для вас, если вам не нужен именно путь, а ссылка на файл, работающий в автономном режиме.
Это на французском, но код javascript:)
Ответ 9
Это альтернативное решение /fix. В FF3 вы можете получить полный путь к файлу в текстовом поле вместо окна просмотра файлов. И это тоже. Перетащив файл!
Вы можете перетащить свой файл в текстовое поле на странице html. и он отобразит полный путь к файлу. Эти данные могут легко передаваться на ваш сервер или манипулировать ими.
Все, что вам нужно сделать, это использовать расширение DragDropUpload
Это расширение поможет вам перетащить файлы в окно просмотра файлов (входной файл). Но все равно вы не сможете получить полный путь к файлу, если вы попытаетесь получить.
Итак, я немного изменил это расширение. В способе, которым я могу перетащить файл на любой "текстовый вход" и получить полный путь к файлу. И таким образом я могу получить полный путь к файлу в FF3 Firefox 3.
Используя File API, добавленный к DOM в HTML5, в веб-приложениях теперь можно запрашивать пользователя выбрать локальные файлы и затем читать содержимое этих файлов. Выбор файлов может осуществляться с помощью элемента <input> или drag and drop.
Если вы хотите использовать DOM File API в расширениях или коде Chrome, используйте. На самом деле, в таком случае вам необходимо ознакомиться с дополнительными нюансами. См. статью Using the DOM File API in chrome code для подробностей.
Доступ к выбранным файлам
Рассмотрим следующий код:
File API делает возможным доступ к FileList , который содержит объекты File , которым соответствуют файлы, выбранные пользователем.
Атрибут multiple элемента input позволяет пользователю выбрать несколько файлов.
Обращение к одному выбранному файлу с использованием классической DOM-модели:
Обращение к одному выбранному файлу через jQuery:
Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"
Доступ к выбранным файлам через событие change
Также возможно (но не обязательно) получить доступ к FileList через событие change . Нужно использовать EventTarget.addEventListener() чтобы добавить обработчик события change , как показано здесь:
Обработчик события change можно назначить атрибутом элемента:
Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом FileList , который состоит из объектов File , представляющих файлы, выбранные пользователем.
Получение информации о выделенных файлах
Объект FileList предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект File . Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины ( length ) списка файлов:
Конкретные объекты File могут быть получены обращением к списку файлов как к массиву:
Этот цикл проходит по всем файлам в списке файлов.
Всего существует три атрибута, предоставляемых объектом File , которые содержат полезную информацию о файле.
name Имя файла как строка доступная только для чтения. Это просто имя файла и оно не включает в себя информацию о пути. size Размер файла в байтах, как 64-битное целое число (возможно только чтение). type MIME тип файла, как строка доступная только для чтения, или пустая строка ( "") если тип файла не может быть определён.
Пример: Отображение размера файла(ов)
Следующий пример показывает возможное использование свойства size :
Использование метода click() скрытых элементов выбора файла
Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), вы можете скрыть непривлекательный элемент <input> и предоставить свой собственный интерфейс для открытия диалогового окна выбора и отображения файла или файлов, выбранных пользователем. Вы можете сделать это, присвоив свойству display элемента input значение none (display:none) и вызывая метод click() скрытого элемента <input> .
Рассмотрим следующую разметку HTML:
Код, обрабатывающий событие click, может выглядеть следующим образом:
Таким образом, вы можете стилизовать новую кнопку открытия диалога выбора файла так, как пожелаете.
Использование элемента label скрытого элемента input
Для того, чтобы открыть диалог выбора файла без использования JavaScript (метода click()), можно воспользоваться элементом <label> .
Рассмотрим следующую разметку HTML:
В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click() . Также в данном случае вы можете стилизовать элемент label так, как пожелаете.
Выбор файлов с использованием технологии drag and drop
Также вы можете предоставить пользователю возможность непосредственно перетаскивать файлы в ваше веб-приложение.
На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:
В данном примере мы превращаем элемент с ID, равным dropbox, в нашу зону перетаскивания при помощи добавления обработчиков для событий dragenter , dragover и drop .
В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover , таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:
Вся настоящая магия происходит в функции drop() :
Здесь мы извлекаем из события поле dataTransfer , затем вытаскиваем из него список файлов и передаём этот список в handleFiles() . После этого процесс обработки файлов одинаков вне зависимости от того, использовал ли пользователь для их выбора элемент input или технологию drag and drop.
Пример: Отображение эскизов изображений, выбранных пользователем
Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.
Здесь наш цикл обрабатывает выбранные пользователем файлы, проверяя атрибут type у каждого файла, чтобы определить является ли файл изображением (выполняется регулярное выражение в строке " image.* "). Для каждого файла, который является изображением, мы создаём новый img элемент. Можно использовать CSS для установки красивых рамок, теней, и указания размеров изображения, но здесь нет нужды делать этого.
Каждое изображение имеет CSS класс obj добавленный к нему для упрощения его поиска в DOM дереве. Мы также добавили атрибут file к каждому изображению, указав File ; это позволит нам получить изображения для фактической загрузки позже. Наконец, мы используем Node.appendChild() для того, чтобы добавить новый эскиз в область предпросмотра нашего документа.
Затем мы устанавливаем FileReader для обработки асинхронной загрузки изображения и прикрепления его к img элементу. После создания нового объекта FileReader , мы настраиваем его функцию onload , затем вызываем readAsDataURL() для запуска операции чтения в фоновом режиме. Когда всё содержимое файла изображения загружено, они преобразуют его в data: URL, который передаётся в колбэк onload . Наша реализация этой процедуры просто устанавливает атрибут src у элемента img загруженного изображения, в результате чего миниатюра изображения появляется на экране пользователя.
Использование URLs объектов
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) представляет поддержку для методов DOM window.URL.createObjectURL() (en-US) и window.URL.revokeObjectURL() (en-US) . Они позволяют создавать простые строки URL, которые могут быть использованы для обращения к любым данным, на которые можно ссылаться, используя объект DOM File , включая локальные файлы на компьютере пользователя.
Когда у вас есть объект File , на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:
URL объекта – это строка, идентифицирующая объект файла File . Каждый раз при вызове window.URL.createObjectURL() (en-US) , создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом window.URL.revokeObjectURL() (en-US) :
Пример: Использование URL объектов для отображения изображений
Этот пример использует URL объектов для отображения эскизов изображений. Кроме этого, оно показывает другую информацию о файлах, включая их имена и размеры. Вы можете посмотреть работающий пример.
HTML, который представляет интерфейс, выглядит так:
Здесь определяется элемент файла <input> , а также ссылка, которая вызывает окно выбора файла, т.к. мы сделали элемент ввода файла скрытым, чтобы этот не слишком привлекательный элемент интерфейса не отображался. Об этом рассказывается в разделе Использование метода click() скрытых элементов выбора файла, как о методе вызова окна выбора файла.
Метод handleFiles() может быть реализован таким образом:
Он начинается с получения элемента <div> с ID fileList . Это блок, в который мы вставим наш список файлов, включая эскизы..
Если объект FileList , передаваемый в handleFiles() является null , то мы просто устанавливаем внутренний HTML блока в отображение текста "No files selected!". Иначе мы начинаем строить список файлов таким образом:
- Создаётся новый элемент - неупорядоченный список ( <ul> ).
- Этот новый элемент вставляется в блок <div> с помощью вызова его метода element.appendChild() .
- Для каждого File в FileList , представляемого files :
- Создаём новый элемент пункта списка ( <li> ) и вставляем его в список.
- Создаём новый элемент изображения ( <img> ).
- Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя window.URL.createObjectURL() (en-US) для создания URL на двоичный объект.
- Устанавливаем высоту изображения в 60 пикселей.
- Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода window.URL.revokeObjectURL() (en-US) , передавая в него строку URL объекта, которая указана в img.src .
- Добавляем новый элемент в список.
Пример: Загрузка файла, выбранного пользователем
Ещё одна вещь, которую вы можете захотеть сделать – это позволить пользователю загрузить выбранный файл или файлы (такие, как изображения из предыдущего примера) на сервер. Это можно сделать асинхронно довольно просто.
Создание заданий на загрузку
Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj , с соответствующим File , прикреплённым в атрибут file . Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя Document.querySelectorAll() , как показано здесь:
Строка 2 получает NodeList в переменную imgs со всеми элементами документа, имеющих класс CSS obj . В нашем случае все они будут эскизами изображений. Как только мы получим этот список, можно просто пройти по нему, создавая для каждого элемента новый экземпляр FileUpload . Каждый из них отвечает за загрузку соответствующего файла.
Управление процессом загрузки файла
Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.
Перед началом загрузки данных выполняются несколько шагов для подготовки:
Асинхронная обработка процесса загрузки
Пример: Использование URL объектов для отображения PDF
URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF.
В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false .
А здесь изменение атрибута src :
Пример: Использование URL объектов с другими типами файлов
Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:
Читайте также: