Js проверить выбран ли файл

Обновлено: 07.07.2024

Мне нужно знать, потому что у меня есть функция, которая будет работать только в том случае, если выбран файл.

3 ответа

У меня есть файл $fileImage = $_FILES['fileCatImg']; , все работает, когда я пытаюсь загрузить его, но как мне проверить, выбран ли файл первым? if (isset($fileImage)) и if (empty($fileImage)) не работают. Один из них всегда возвращает истинное значение, но другой всегда возвращает ложное.

значение типа DOMString
Если атрибут типа элемента имеет значение "text", "файл" или "password", это представляет текущее содержимое соответствующего элемента управления формой в интерактивном агенте пользователя.

Я использую это javascript:

с этим html для кнопки файл:

надеюсь, это поможет!

Итак, допустим, у вас есть некоторая форма html и у вас есть пользовательский ввод для загрузки файла:

И вы хотите проверить имя файла, который имеет пользователь chosen/selected:

Для тех, кто использует requireJS:

Похожие вопросы:

У меня есть две переключатели в форме HTML. Диалоговое окно появляется, когда одно из полей имеет значение null. Как я могу проверить, выбран ли переключатель?

У меня есть страница в моем веб-приложении, где есть возможность загрузить файл. Я пытаюсь проверить, есть ли файл, выбранный для загрузки, перед отправкой формы. Я использую плагин jQuery form.

Я использую JavaScript для проверки формы загрузки, одно из условий-проверить, был ли выбран какой-либо файл. Я думал, что это будет просто, но я не могу заставить это работать. Является ли этот код.

Как проверить, выбран ли файл JSON из браузера с помощью функции match() в javascript. Приведенный ниже фрагмент кода используется для проверки наличия файлов изображений: <script> var.

Есть ли какой-либо способ для браузера lock файл после того, как он был выбран <input type=file /> ? Прямо сейчас я могу выбрать файл, начать некоторые операции с ним с помощью JavaScript, а.

Я хочу проверить, существует ли файл локально, где находится файл HTML. Это должен быть JavaScript. JavaScript никогда не будет отключен. JQuery это не хорошо, но может сделать.

Кстати, я делаю титановое приложение для Mac, поэтому я ищу способ защитить свои файлы от людей, которые нажимают «показать содержимое пакета».

Если вы разрабатываете, как я предполагаю, настольное приложение, использующее Titanium, то вы можете использовать getFile модуля FileSystem, чтобы получить объект file, а затем проверить, существует ли он, используя метод существующие.

Вот пример, взятый с веб-сайта Appcelerator:

Для тех, кто думал, что он спрашивает об обычной ситуации веб-разработки, вот два ответа, которые я бы дал:

1) вы хотите проверить, существует ли файл на стороне сервера. В этом случае вы можете использовать ajax-запрос, попытаться получить файл и отреагировать на полученный ответ. Хотя имейте в виду, что вы можете проверять только те файлы, которые доступны вашему веб-серверу. Лучшим подходом было бы написать сценарий на стороне сервера (например, php), который будет выполнять проверку для вас, учитывая имя файла и вызывая этот сценарий через ajax. Также имейте в виду, что вы можете очень легко создать дыру в безопасности вашего приложения/сервера, если не будете достаточно осторожны.

2) вы хотите проверить, существует ли файл на стороне клиента. В этом случае, как указали другие, это не разрешено по соображениям безопасности (хотя IE допускал это в прошлом через ActiveX и класс Scripting.FileSystemObject), и это нормально (никто не хочет, чтобы вы чтобы иметь возможность просматривать их файлы), так что забудьте об этом.

Так как «Kranu» предупреждает: «Единственное взаимодействие с файловой системой - загрузка файлов js. , . ', который предлагает сделать это с проверкой ошибок, по крайней мере скажет вам, существует ли файл not - что может быть достаточно для ваших целей?

Из local machine вы можете проверить, существует ли файлне существует, попытавшись загрузить его как внешний скрипт и затем проверить на наличие ошибок. Например:

добавьте некоторые случайные данные к имени файла (url + = "?" + новая дата и т. д.), чтобы кэш браузера не служил старому результату.
установите уникальный идентификатор элемента (el.id =), если вы используете это в цикле, чтобы функция get_error могла ссылаться на правильный элемент.
установка строки onerror (el.onerror = function) немного сложнее, потому что нужно вызвать функцию get_error и передать el.id - если была установлена только нормальная ссылка на функцию (например, el.onerror = get_error), тогда параметр el.id не может быть передан.
помните, что это только проверяет, существует ли файл .

Вы можете использовать это

Javascript не может получить доступ к файловой системе и проверить наличие. Единственное взаимодействие с файловой системой - это загрузка js-файлов и изображений (png/gif/etc).

Javascript не является задачей для этого

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

К счастью, по соображениям безопасности невозможно получить доступ к клиентской файловой системе со стандартным JS. Однако существуют некоторые проприетарные решения (например, компонент Microsoft ActiveX только для IE).

Альтернатива: Вы можете использовать «скрытый» элемент апплета, который реализует эту проверку с использованием привилегированного объекта действия и переопределяет ваш метод run с помощью:

Один из способов сделать это - создать тег img и установить атрибут src для файла, который вы ищете. Onload или onerror элемента img будут срабатывать в зависимости от того, существует ли файл. Вы не можете загрузить какие-либо данные, используя этот метод, но вы можете определить, существует ли конкретный файл или нет.

Однако, в этом случае существует большая проблема: у всех ваших пользователей имеется в распоряжении только один сервер, но каждый из них хочет выполнить какие-то действия. Это может вызвать увеличение расхода ресурсов сервера или даже вывести ваш сервер из строя из-за огромного количества запросов.

Вторая причина, по которой вы все еще выполняете вышеуказанные действия на сервере, заключается в том, что вы просто еще не прочитали данную статью и не знаете всех возможностей современных браузеров. Не волнуйтесь! Мы откроем вам все их секреты и тайны.

Данную тему можно разделить на три части: прошлое, настоящее и будущее.

Прошлое. ActiveX

В прошлом существовало только два браузера: Netscape и IE. Однажды Microsoft решил порадовать пользователей IE и добавил невероятную для того времени функциональность, которая позволяла коду, написанному на языке JavaScript, обмениваться информацией с операционной системой Windows. Данный способ получил название ActiveX.

Описанная технология может применяться даже сегодня в последней версии браузера IE (по умолчанию, ActiveX отключен). Не будем долго останавливаться на этой теме, поскольку ActiveX актуален только для IE, и пользователю необходимо проделать много необычных действий со своим браузером для того, чтобы запустить сценарий, который содержит ActiveXObjects.

В разделе, посвященном настоящему времени, мы поговорим об API для работы с файлами и Drag-and-Drop, а также о некоторых интересных примерах.

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

Настоящее. Управление добавленными файлами

Существует два способа передать файл в современный браузер (IE10+):

1) Input тег с типом “file”;
2) Перетянуть файлы на какой-либо элемент DOM-модели.

Старые добрые времена с элементом Input

Первый вариант может использоваться даже в старых браузерах. Единственное отличие в том, что мы не можем получить содержимое файлов в IE9 и более ранних версий. Это означает, что для выполнения некоторых действий нам все еще необходимо использовать сервер. Чтобы получить файлы, выбранные пользователем, нам нужно добавить обработчик события “change” и проверять свойство “files” данного элемента при вызове функции-обработчика.

var template = "<div><span>Name: </span><span><></span></div><div><span>Size: </span><span>></span></div><div><span>Data: </span><span>></span></div>" ," , file . name ) . replace ( ">" , file . size ) . replace ( ">" , e . target . result . substring ( 0 , 10 ) ) ;" , file . name ) . replace ( ">" , "Don't know" ) . replace ( ">" , "This browser isn't smart enough!" ) ;Как видите, здесь мы использовали метод “readAsText” объекта “FileReader”, чтобы получить содержимое файла. У него также есть методы, которые читают файл(файлы) и возвращают результаты в различных форматах.

Будьте внимательны, используя метод “readAsBinaryString”, поскольку он не поддерживается браузером IE версий 10-11.

Возможно, вы также хотите контролировать процесс чтения файла, отобразить индикаторы прогресса или ожидания, или прервать его, если файлы слишком объемные. Специально для вас у FileReader есть такие события как onprogress, onabort, onloadstart, onloadend, onerror, а также метод abort, который останавливает процесс чтения и выдает ошибку, которая может быть обработана.

В данном примере мы немного исправили функциональность для IE9, у которого нет возможности чтения файлов. Из информации о выбранном файле (множественный выбор не поддерживается) мы можем получить только его имя, которое хранится в свойстве “value” элемента input.

fileReader . addEventListener ( "loadend" , function ( e ) <

Перетащи меня в браузер!

1) Прежде всего, вам не стоит проверять, поддерживает ли ваш браузер событие “ondrop”, поскольку используется IE9. Он поддерживает данное событие, но не имеет свойства dataTransfer.

2) Если вы хотите поймать событие “ondrop”, вам необходимо добавить обработчик события “ondragover” и вызвать функцию preventDefault. По умолчанию, браузер попытается загрузить этот файл или отобразить его на странице (если это рисунок или PDF файл), и вам нужно его остановить.

Поддержка старых версий браузеров: в таких браузерах, как IE9, вы можете поместить элемент input из предыдущих примеров на текущем элементе, растянуть его, установить для него прозрачность равную 100%, и изменить текст на следующий: “Кликните и выберите файл”. Когда пользователь кликнет на этот элемент, он увидит обычный диалог для выбора файлов. Подобное решение подходит также для планшетов и телефонов, у которых нет возможности разделить экраны и перетягивать элементы между ними.

Перетащи меня из браузера!

Предыдущий пример мог вызвать следующий вопрос о функциональности drag-and-drop: “Можем ли мы перетащить файлы из браузера на компьютер?” Ответ будет “Да”, но работает это только в браузере Chrome. Тем не менее, это отличная функция для вашей веб страницы, и мы должны ее испробовать. В следующем примере вам нужно перетянуть картинку в формате PDF на свой компьютер, и она будет сохранена как PDF файл.

Перетащите эту картинку из браузера на ваш рабочий стол

document . getElementById ( "fileData" ) . addEventListener ( "dragstart" , function ( e ) < e . dataTransfer . setData ( "DownloadURL" , "application/pdf:doc.pdf:file:///C:/personal/publications/demo/doc.pdf" ) ;

Как уже было сказано, перетащить файл можно только из браузера Chrome. Однако, проблемой это не является, поскольку это не основная функциональность вашего веб-приложения, а просто отличное дополнение для пользователей Chrome, которая может быть благополучно заменена обычной ссылкой для загрузки нужного файла.

“Все течет, все изменяется … и … дважды в одну и ту же реку войти невозможно”. (Гераклит)

Теперь мы можем получить файлы и их содержимое в формате JavaScript. Но что мы можем с ними делать? Как мы можем их изменить? Вот в чем вопрос.

Прежде всего, мы можем работать с текстом. Когда мы прочитаем файл как текстовую строку, мы получим все его текстовое содержимое и сможем его парсить. Например, пользователь может перетянуть новый CSS файл, и вы сможете сразу применить его на своей странице. Или, если это файл со статьей, которую нужно опубликовать, вы можете его прочитать, применить какие-либо стили к заголовкам и поместить его в текстовый редактор на вашей странице.

Примером также может быть парсинг файла в формате excel. Вам не нужно посылать его на сервер, конвертировать в JSON и отправлять обратно. Это можно сделать на клиентской стороне, не тратя времени на запрос и ожидание ответа сервера. Уже есть библиотеки для парсинга xls и xlsx файлов, которые вы можете найти здесь: XLS и XLSX.

У каждого объекта Blob есть тип и свойства, которые задают его размеры, а также метод “slice”. Все данные, которые содержатся в данном объекте Blob, можно разделить с помощью метода “slice”. Этот метод возвращает новый объект Blob, который содержит в себе отделенную часть данных.

Типизированные массивы и буферы используются для хранения двоичных данных фиксированной длины и определенного типа (Int8Array или Int32Array).

Все это позволяет нам делать занимательные вещи на клиентской стороне, например, сжимать файлы. Эта библиотека позволяет применить алгоритм Deflate ко всем выбранным файлам, и собрать их в один zip файл. Кроме того, она использует Web Workers, чтобы описанный процесс протекал в фоновом режиме.

Еще один пример обработки файла, содержащего двоичные данные, это PDF.js. Это проект, который находится в открытом доступе и используется для отображения на веб-странице документов в формате PDF. Все, что вам нужно сделать, это передать ему массив двоичных данных, и он отрисует содержимое PDF-документа на странице.

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

Во время написания этой статьи данная функциональность поддерживалась только браузерами Chrome и Opera. Опять-таки, это не такая уж важная проблема, поскольку данная возможность может использоваться как дополнительный инструмент для кэширования файлов в вашем браузере. Давайте более детально рассмотрим ее API.
Прежде всего, нам нужно запросить объект файловой системы с помощью метода webkitRequestFileSystem . Он принимает 4 параметра: тип, размер, функция, которая будет вызвана в случае успешной обработки запроса, и функция, которая будет вызвана при возникновении ошибки.

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

Для того, чтобы запросить разрешение пользователя на использование постоянного хранилища, нам нужно вызвать метод navigator.webkitPersistentStorage.requestQuota .

Теперь мы можем создать наше первое хранилище вместимостью 1Гб:
Временная файловая система:

Очень важный аспект любого языка программирования — это его система типов и типы данных в нем. Для строго типизированных языков программирования, например для таких как Java, переменные определяются конкретными типами, которые в свою очередь ограничивают значения переменных.

Несмотря на то, что JavaScript — это динамически типизированный язык программирования, существуют расширения над языком, которые поддерживают строгую типизацию, например TypeScript.

В JavaScript возможно иметь переменную, которая была определена как содержащая значение типа string , а несколько позже на пути своего жизненного цикла она становится ссылкой на значение типа object . Также случается, что JavaScript-движок неявно занимается приведением типов во время выполнения сценария. Проверка типов очень важна для написания предсказуемых JavaScript-программ.

Для проверки типов в JavaScript присутствует довольно простой оператор typeof

Однако позже мы с вами увидим, что использование этого оператора может ввести в заблуждение, об этом мы поговорим ниже.

Типы данных в JavaScript

Перед тем как начать рассматривать проверку типов с помощью оператора typeof важно взглянуть на существующие типы данных в JavaScript. Хотя в этой статье не рассматриваются подробные сведения о типах данных JavaScript, вы все равно сможете что-то почерпнуть по мере чтения статьи.

До ES6 в JavaScript присутствовало 6 типов данных. Но с появлением ES6-спецификации был добавлен тип данных Symbol . Ниже приведен список всех существующих типов данных:

String
Number
Boolean (значения true and false)
null (значение null)
undefined (значение undefined)
Symbol
Object

Первые шесть типов данных относятся к примитивным типам. Все другие типы данных помимо вышеуказанных шести являются объектами и относятся к ссылочному типу. Объект — это не что иное, как коллекция свойств, представленная в виде пар ключ и значение.

Обратите внимание, что в указанном списке типов данных, null и undefined — это примитивные типы в JavaScript, которые содержат ровно одно значение.

Вы уже наверно начали задаваться вопросом, а как же массивы, функции, регулярные выражения и прочие вещи? Все это специальные виды объектов.

array — специальный вид объектов, который представляет собой упорядоченную коллекцию пронумерованных значений со специальным синтаксисом и характеристиками, что отличает работу с ним от работы с другими объектами
function — специальный вид объектов, содержащий исполняемый сценарий, который выполняется при вызове функции. Этот вид объектов также имеет специальный синтаксис и характеристики, отличающие работу с ним от работы с другими объектами

JavaScript содержит несколько конструкторов для создания и других различных объектов, например, таких как:

Date — для создания объектов даты
RegExp — для создания регулярных выражений
Error — для создания JavaScript ошибок

Проверка типов с использованием typeof

Синтаксис

Оператор typeof в JavaScript является унарным оператором (принимает только один операнд), который возвращает строковое значение типа операнда. Как и другие унарные операторы, он помещается перед его операндом, разделенный пробелом:

Однако существует альтернативный синтаксис, который позволяет использовать typeof похожим на вызов функции, через оборачивание операнда в круглые скобки. Это очень полезно при проверке типов возвращаемого значения из JavaScript-выражения:

Защита от ошибок

До спецификации ES6 оператор typeof всегда возвращал строку независимо от операнда, который использовал.

Для необъявленных идентификаторов функция typeof вернет “undefined” вместо того, чтобы выбросить исключение ReferenceError.

Однако в ES6, переменные объявленные c блочной областью видимости с помощью let и const будут возвращать ReferenceError , если они использовались с оператором typeof до того как были инициализированы. А все потому что:

Переменные, имеющие блочную область видимости остаются во временной мертвой зоне до момента инициализации:

Проверка типов

Следующий фрагмент кода демонстрирует проверку типов c использованием оператора typeof :

Обратите внимание на то, что все значения созданные с помощью ключевого слова new всегда имеют тип “object” . Исключением из этого является только конструктор Function .

Ниже представлена сводка результатов проверок типов:

Улучшенная проверка типов

Результаты определения типов в предыдущем разделе показали, что некоторые значения требуют дополнительных проверок. Например, оба значения null и [] будут иметь тип "object" , когда проверка типа сделана с помощью typeof оператора.

Дополнительные проверки могут быть сделаны при использовании некоторых других характеристик, например:

использование оператора instanceof
проверка свойства constructor для объекта
проверка класса с помощью метода объекта toString()

Проверка на null

Использование оператора typeof для проверки значения "null" , как вы уже заметили, не лучшая идея. Лучший способ проверить на значение "null" — это выполнить строгое сравнение с null , как показано в следующем фрагменте кода:

Очень важным здесь является использование оператора строгого сравнения. Следующий фрагмент кода иллюстрирует использования значения undefined :

Проверка на NaN

NaN является специальным значением получаемым в результате арифметических операций, когда нет определения как можно представить результат. Например (0 / 0) => NaN . Также когда совершена попытка преобразования нечислового значения, у которого отсутствует возможное численного представление, результатом преобразования будет NaN .

Любая арифметическая операция, включающая в выражение NaN, всегда определяется как NaN.

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

Использование оператора typeof для проверки типа для NaN вернет значение “number” . Для проверки же на значение NaN вы можете использовать глобальную функцию isNaN() или даже предпочтительней будет использовать функцию Number.isNaN() , добавленную в ES6:

Значение NaN в JavaScript имеет отличительную особенность. Это единственное значение в JavaScript, которое при сравнении с каким-либо другим значением, включая NaN, не будет ему эквивалентно

Вы можете проверить на значение NaN следующим образом

Функция выше очень похожа на реализацию функции Number.isNaN() , добавленную в ES6, и следовательно, ее можно использовать в качестве полифила для сред выполнения, отличных от ES6, следующим образом:

В заключение вы можете усилить проверку с помощью Object.is() , добавленную в ES6 для проверки на значение NaN . Функция Object.is() позволяет проверить, что два переданных в нее значения это одно и то же значение:

Проверка для массивов

Использование проверки с помощью typeof для массива вернет “object” . Существует несколько путей для того, чтобы проверить является ли значение массивом, как показано в нижнем фрагменте кода:

Общий подход к проверке типов

Как вы видели на примере массивов, метод Object.prototype.toString() может быть полезным при проверки типов объектов для любого значения в JavaScript.

Когда вызывается этот метод с помощью call() или apply() , он возвращает тип объекта в формате: [object Type] , где Type является типом объекта.

Рассмотрим следующий фрагмент кода:

Фрагмент кода ниже демонстрирует результаты проверки типов с использованием созданной функции type() :

Бонус: не все является объектами

Очень вероятно, что в какой-то момент вы могли столкнуться с этим утверждением:

“Все сущности в JavaScript являются объектами.” — Неправда

Это ошибочное утверждение и на самом деле это неправда. Не все в JavaScript является объектами. Примитивы не являются объектами.

Вы можете начать задаваться вопросом — почему же мы можем делать следующие операции над примитивами, если они не являются объектами?

("Hello World!").length — получить свойство length для строк
("Another String")[8] — получить символ строки по индексу 8
(53.12345).toFixed(2) — выполнить Number.prototype.toFixed() метод над числом

Причина, по которой мы можем достичь всего этого над примитивами, заключается в том, что JavaScript-движок неявно создает соответствующий объект-обертку для примитива и затем вызывает указанный метод или обращается к указанному свойству.

Когда значение было возвращено, объект-обертка отбрасывается и удаляется из памяти. Для операций, перечисленных ранее, JavaScript-движок неявно выполняет следующие действия:

Заключение

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

Также вы видели, как проверка типов с помощью оператора typeof может ввести в заблуждение. И, наконец, вы видели несколько способов реализации предсказуемой проверки типов для некоторых типов данных.

Если вы заинтересованы в получении дополнительной информации об операторе typeof в JavaScript, обратитесь к этой статье.

Читайте также: