Jquery вставить текст из файла
В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:
- html – для чтения и изменения HTML содержимого элемента;
- text – для чтения и изменения текстового содержимого элемента;
- val – для чтения и изменения значения элементов формы.
Установка значения элементу формы
Изменение значения элемента формы в jQuery осуществляется с помощью метода val .
Например, при клике на кнопку установим элементу input её текст:
Данный метод устанавливает значение для всех элементов набора, к которому он применяется.
Например, преобразуем все буквы значения элемента input после потеря фокуса в прописные:
Например, поменяем значение элемента select :
Например, присвоим значения элементу select с множественным выбором ( multiple ):
Объект File наследуется от объекта Blob и обладает возможностями по взаимодействию с файловой системой.
Есть два способа его получить.
Во-первых, есть конструктор, похожий на Blob :
- fileParts – массив значений Blob / BufferSource /строки.
- fileName – имя файла, строка.
- options – необязательный объект со свойством:
- lastModified – дата последнего изменения в формате таймстамп (целое число).
Во-вторых, чаще всего мы получаем файл из или через перетаскивание с помощью мыши, или из других интерфейсов браузера. В этом случае файл получает эту информацию из ОС.
Так как File наследует от Blob , у объектов File есть те же свойства плюс:
- name – имя файла,
- lastModified – таймстамп для даты последнего изменения.
В этом примере мы получаем объект File из :
Через можно выбрать несколько файлов, поэтому input.files – псевдомассив выбранных файлов. Здесь у нас только один файл, поэтому мы просто берём input.files[0] .
Чтение HTML контента элемента
Например, получим HTML содержимое элемента с идентификатором ( id ) contact :
Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:
Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each ):
Получаем и обрабатываем файлы
Для начала создадим директорию, в которой будут храниться наши проекты. Назовем ее «Work-With-Files-in-JavaScript» или как Вам будет угодно.
В этой директории создадим папку для первого проекта. Назовем ее «File-Reader».
Создаем в ней файл «index.html» следующего содержания:
Здесь мы имеем контейнер-файлоприемник и инпут с типом «file» (для получения файла; мы будем работать с одиночными файлами; для получения нескольких файлов инпуту следует добавить атрибут «multiple»), который будет спрятан под контейнером.Стили можно подключить отдельным файлом или в теге «style» внутри head:
Можете сделать дизайн по своему вкусу.Не забываем подключить скрипт либо в head с атрибутом «defer» (нам нужно дождаться отрисовки (рендеринга) DOM; можно, конечно, сделать это в скрипте через обработку события «load» или «DOMContentLoaded» объекта «window», но defer намного короче), либо перед закрывающим тегом «body» (тогда не нужен ни атрибут, ни обработчик). Лично я предпочитаю первый вариант.
Откроем index.html в браузере:
Прежде чем переходить к написанию скрипта, следует подготовить файлы для приложения: нам потребуется изображение, аудио, видео, текст в формате txt, pdf и любом другом, например, doc. Можете использовать мою коллекцию или собрать свою.
Нам часто придется обращаться к объектам «document» и «document.body», а также несколько раз выводить результаты в консоль, поэтому предлагаю обернуть наш код в такое IIFE (это не обязательно):
Первым делом объявляем переменные для файлоприемника, инпута и файла (последний не инициализируем, поскольку его значение зависит от способа передачи — через клик по инпуту или бросание (drop) в файлоприемник):Отключаем обработку событий «dragover» и «drop» браузером:
Для того, чтобы понять, зачем мы это сделали, попробуйте перенести изображение или другой файл в браузер и посмотрите, что произойдет. А происходит автоматическая обработка файлов, т.е. то, что мы собираемся реализовать самостоятельно в познавательных целях.Обрабатываем бросание файла в файлоприемник:
Мы только что реализовали простейший механизм «dran'n'drop».Обрабатываем клик по файлоприемнику (делегируем клик инпуту):
Приступаем к обработке файла:
Удаляем файлоприемник и инпут:
Способ обработки файла зависит от его типа:
Мы не будем работать с html, css и js-файлами, поэтому запрещаем их обработку:
Мы также не будем работать с MS-файлами (имеющими MIME-тип «application/msword», «application/vnd.ms-excel» и т.д.), поскольку их невозможно обработать нативными средствами. Все способы обработки таких файлов, предлагаемые на StackOverflow и других ресурсах, сводятся либо к конвертации в другие форматы с помощью различных библиотек, либо к использованию viewer'ов от Google и Microsoft, которые не хотят работать с файловой системой и localhost. Вместе с тем, тип pdf-файлов также начинается с «application», поэтому такие файлы мы будем обрабатывать отдельно:
Для остальных файлов получаем их «групповой» тип:
Посредством switch..case определяем конкретную функцию обработки файла:Подскажите, пожалуйста, столкнулся с проблемой (в связи с тем, что умею выводить только "Привет мир" на страницу), : на компьютере имеется html-таблица, ячейки которой могу редактировать и скачивать txt-файл, в котором отображаются данные из таблицы. Вопрос, можно ли используя только JavaScript и JQuery считать данные из txt и заполнить таблицу?
Задача нужна для того, чтобы после добавления столбцов в таблице (по кнопки с помощью js-скрипта, можно было скачать файл (скрипт уже есть) и при открытии страницы заново можно было выгрузить данные из файла в таблицу сразу).Буду очень рад, если кто-то подскажет, пока пришел к выводу, что нужен php или ajax. Но можно ли каким-то другим способом ограничиться JS?
HTML+JavaScript чтение TXT на хостинге
Доброго времени суток! Сразу хочу сказать, что о вредоносных программах речь не идёт. Проблема у.Чтение txt-файла и заполнение таблицы Excel
Добрый день, есть текстовый файл. Из него вынимаем данные, и записываем в excel таблицу. Вопрос как.Чтение данных из *.txt файла, находящегося в ресурсах, и заполнение этими данными DataGridView
На форме расположен ComboBox, в котором можно выбрать один из типов резьбы (G,M,Pg,Rp,Tr и все.Удаление контента элемента
В jQuery для удаления содержимого элемента имеется метод empty . Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.
Например, удалим содержимое всех элементов с классом vote :
Итого
File объекты наследуют от Blob .
Помимо методов и свойств Blob , объекты File также имеют свойства name и lastModified плюс внутреннюю возможность чтения из файловой системы. Обычно мы получаем объекты File из пользовательского ввода, например, через или перетаскиванием с помощью мыши, в событии dragend .
Объекты FileReader могут читать из файла или Blob в одном из трёх форматов:
- Строка ( readAsText ).
- ArrayBuffer ( readAsArrayBuffer ).
- URL в формате base64 ( readAsDataURL ).
Однако, во многих случаях нам не нужно читать содержимое файла. Как и в случае с Blob, мы можем создать короткий URL с помощью URL.createObjectURL(file) и использовать его в теге или . Таким образом, файл может быть загружен или показан в виде изображения, как часть canvas и т.д.
У меня проблемы с этим. Сначала я попытался установить теги сценария как строки, а затем с помощью jquery replaceWith () добавить их в документ после загрузки страницы:
Но у меня есть ошибки строкового литерала в этой переменной. Затем я попытался кодировать строку, например:
но отправив это для replaceWith() вывода только этой строки в браузер.
Может кто-нибудь, дайте мне знать, как вы будете динамически добавлять тег в браузер после загрузки страницы, в идеале через jQuery?
Ответ @ Rocket - лучший, но если вы определенно хотите добавить встроенный скрипт из строки, вы просто передадите его eval() функции. Но использование eval() почти всегда предполагает, что есть лучший способ сделать то, что вы пытаетесь сделать.
мы пытаемся отложить загрузку сторонних объявлений до конца страницы. эти объявления вызываются через 2 тега сценария, поэтому я хотел запустить функцию после загрузки страницы, которая будет динамически их вставлять.
Не все сторонние скрипты предназначены для отложенного выполнения. Если скрипт использует document.write и вы вызываете его после загрузки страницы, он уничтожит страницу.
Почему бы не импортировать эти теги в
Вы можете поместить сценарий в отдельный файл, а затем использовать $.getScript для его загрузки и запуска.
спасибо, но это вставит это в DOM? Я понимаю, что упустил эту важную информацию, что мне нужно, чтобы тег скрипта был вставлен в DOM, оценен, после чего он возвращает сторонний рекламный код для отображения на нашем сайте в определенном
.$.getScript просто загрузит файл .js через AJAX и выполнит его. Скрипт не обязательно должен находиться в DOM, чтобы иметь доступ к div на вашей странице.
Но со $.getScript() сценарием нужно будет находиться в одном домене или удаленный домен и браузер должны будут поддерживать CORS .
@hippietrail На самом деле это неправда. Он просто вставляет простой тег скрипта, который не требует CORS или того же домена. Я использую это, чтобы сократить код для загрузки, например, Google Analytics, и он отлично загружается. Фактически выполняемый код jquery очень похож на фрагмент кода GA.
Поскольку ответ от @hippietrail привлечет наибольшее внимание своими четырьмя положительными голосами, следует четко указать, что он неверен. Как подчеркивается в $.ajax примечаниях документации jQuery : «На запросы сценариев и JSONP не распространяются одни и те же ограничения политики происхождения». источник . Другими словами, вы $.getScript можете извлекать файлы .js из других доменов, а не только из вашего собственного .
+1 для использования, append чтобы добавить скрипт. Добавление вызывает немедленную оценку даже встроенного скрипта (именно то, что мне нужно). Спасибо
У меня в IE8 / 9 возникает множество проблем с этим подходом. А именно ошибки переполнения стека. Я прибег к методу $ .getScript () ниже, чтобы эта работа работала по всем направлениям.
@Reddy Отличный комментарий. Это было опубликовано в октябре 2010 года, я уверен, что к настоящему времени этот метод больше не является допустимым / рекомендуемым подходом, пользователи должны действовать по своему усмотрению.
Вот правильный способ сделать это с помощью современного (2014) JQuery:
или если вы действительно хотите заменить div, вы можете сделать:
Более простой способ:
Вы также можете использовать эту форму для загрузки css.
Возможно, вы захотите не помещать строку в свой источник, поскольку это может вызвать проблемы с синтаксическим
Этот ответ технически аналогичен тому, что ответил jcoffland, или равен ему. Я просто добавил запрос, чтобы определить, присутствует ли сценарий уже или нет. Мне это нужно, потому что я работаю на веб-сайте интрасети с парой модулей, некоторые из которых совместно используют сценарии или приносят свои собственные, но эти сценарии не нужно загружать каждый раз снова. Я использую этот фрагмент уже более года в производственной среде, он отлично работает. Комментируя про себя: Да, я знаю, правильнее было бы спросить, существует ли функция . :-)
кстати. Я делаю то же самое с таблицами стилей: if (! $ ('Head> link [href = "widgets / css / widgets.css"]'). Length) '). attr (' rel ',' stylesheet '). attr (' href ',' widgets / css / widgets.css '));>$>
Есть одно обходное решение, которое больше похоже на взлом, и я согласен, что это не самый элегантный способ сделать это, но работает на 100%:
Скажите, что ваш ответ AJAX похож на
Обратите внимание, что я специально пропустил закрывающий тег. Затем в скрипте, загружающем вышеуказанное, сделайте следующее:
Только не спрашивайте меня, почему :-) Это одна из тех вещей, к которым я пришел в результате отчаянных почти случайных испытаний и неудач.
У меня нет полных предложений о том, как это работает, но, что интересно, это НЕ будет работать, если вы добавите закрывающий тег в одну строку.
В такие моменты я чувствую, что успешно разделил на ноль.
Это не сработает, если закрывающий тег скрипта является цельным, поскольку браузер видит его как закрывающий тег для вашего скрипта, а не строковый литерал.
@Sathvik правильный, согласно этой ссылке. Комментарий Эша, похоже, был ответом на комментарий, который был удален.
Он должен работать. Я попробовал; тот же результат. Но когда я использовал это:
Это сработало для меня.
Самым важным здесь является + =, поэтому html добавляется, а не заменяется.
Мнение о том, что JavaScript не умеет взаимодействовать с файловой системой, является не совсем верным. Скорее, речь идет о том, что это взаимодействие существенно ограничено по сравнению с серверными языками программирования, такими как Node.js или PHP. Тем не менее, JavaScript умеет как получать (принимать), так и создавать некоторые типы файлов и успешно обрабатывать их нативными средствами.
В этой статье мы создадим три небольших проекта:
- Реализуем получение и обработку изображений, аудио, видео и текста в формате txt и pdf
- Создадим генератор JSON-файлов
- Напишем две программы: одна будет формировать вопросы (в формате JSON), а другая использовать их для создания теста
Решение
технология ajax без проблем позволяет получать содержимое текстового файла
1. создайте текстовой файл myfile.txt с нужным вам содержимым
2. в той же директории создайте файл index.html со следующим кодом внутри:откройте файл index.html в браузере и кликните по кнопке "start" -- страница получит содержимое текстового файла myfile.txt и выведет его в модальном окошке
для решения вашей задачи вам нужно вместо alert (htReq.responseText); // . прописать код, который содержимое текстового файла занесёт в нужные вам ячейки таблицы -- с этим помочь не могу, потому как не владею информацией ни о таблице, ни о текстовом файле
Спасибо за ответ. Но Ajax не получится в моих условиях использовать. Все, что имею - JS и JQuery.
Поэтому ищу варианты, которые помогут тем, что имею. Нашел способ заполнить таблицу из Json. Но вот как при изменении таблицы записать новые данные в Json не знаю.
Oetas, ajax -- это комбинация работы js и сервера
js поддерживается любым браузером, ваш компьютер -- это сервер
никаких более "условий" не нужнотак что. сделайте то, что я вам выше написал, лично убедитесь в том, что страница прочитывает текстовой файл, и не морочьте голову ни себе, ни людям
покуда вы изображаете попугая, с умным видом повторяющего где-то услышанные им слова (js, jquery, ajax, php, json), и не понимающего, что эти слова означают
Спасибо большое. Получилось!
Таблица состоит из 4-ех столбцов.
Номер Участник Состояние Описание
1111. Иванов. Готово. Предоставить доступ к БД
Подскажите, пожалуйста, сам так и не смог разобраться.
Он добавляет содержимое текстового файла в таблицу, но естественно в одну ячейку и весь текст файла.
Как сделать так, чтобы он в конкретную ячейку конкретную часть текста добавлял?
Таблица состоит из 4-ех столбцов:
Номер Автор Статус Содержание
В файле есть строка:
736 Иванов Выполнен повторная регистрацияНужно, чтобы в таблице html появилась эта строка, в ячейке Номер " 736", В Автор "Иванов", в Статус "выполнен", в Содержание "повторная регистрация".
Oetas, во-первых, необходимо так отформатировать строку текстового файла, чтобы можно было однозначно получить из неё именно ЧЕТЫРЕ "конкретные части"
из '736 Иванов Выполнен' путём разбиения по пробелам получается ТРИ "конкретные части", а вот как программа должна догадаться, что 'повторная регистрация' -- это всего ОДНА конкретная часть", а не ДВЕ?
у вас, что, пробел между словами 'повторная регистрация' имеет какой-то особый запах, отличный от запаха других пробелов в строке?
тогда вам нужен специальный компьютер, имеющий "нюх, как у собаки, и глаз, как у орла"во-вторых, из вашего описания таблицы непонятно -- имеется ли в таблице код строки с 4-мя пустыми ячейками для заполнения их 4-мя "конкретными частями" из текстового файла, или же всю эту строку с 4-мя ячейками создавать надо?
итожу: 1) разделите "конкретные части" в строке текстового файла каким-то символом, которого гарантированно не будет внутри любой "конкретной части", таковым символом, например, может быть горизонтальная табуляция (клавиша TAB на клавиатуре)
Получение текстового содержимого элемента
В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text . При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.
Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:
Метод text также как и html возвращает содержимое только первого элемента выборки (если в ней присутствуют несколько элементов).
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* не генерируют события, а возвращают результат, как это делают обычные функции.
Но это только внутри веб-воркера, поскольку задержки в синхронных вызовах, которые возможны при чтении из файла, в веб-воркерах менее важны. Они не влияют на страницу.
Получение значения элемента формы
В jQuery чтение значений элементов input , select и textarea осуществляется посредством метода val .
Например, получим значение элемента input :
Метод val , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.
Для получения значения выбранного элемента ( select , checkbox , или radio кнопок) используйте :checked .
Если коллекции нет элементов, то метод val возвращает значение undefined .
Например, получим значение элемента textarea , имеющего имя description :
Получим значение элемента select :
Если элемент select имеет множественный выбор (атрибут multiple ), то метод val возвратит в качестве результата массив, содержащий значение каждой выбранной опции ( option ). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null ).
Изменение HTML контента элемента
Например, заменим содержимое элемента ul :
Если на странице будет несколько элементов ul , то данный метод заменит содержимое каждого из них.
Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id .
Использование функции для замены HTML контента элемента:
Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):
Замена контента элемента указанным текстом
Метод text может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.
После выполнения, элемент div с классом info будет иметь следующий HTML код:
На экране данный элемент будет выглядеть так:
Если в выборке присутствует несколько элементов, то метод text заменит содержимое каждого из них:
Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):
Читайте также: