Чтение и запись файла на JavaScript, работа с FileReader на JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ก.ย. 2024
  • В этом уроке я покажу вам как работать с FileReader на JavaScript. Благодаря FileReader можно прочитать данные из текстового файла на вашем компьютере и поместить их в какую-то переменную в коде для дальнейшей работы с этими данными.
    Gist: gist.github.co...
    ⚡️ Эксклюзив на Boosty - boosty.to/itdo...
    💡 Telegram канал - t.me/itdoctor_...
    🎥 Курсы на Stepik - stepik.org/use...
    💰 Донаты на ЮMoney - sobe.ru/na/itd...
    ВКонтакте - itdocto...
    Яндекс Дзен - zen.yandex.ru/...
    Rutube - rutube.ru/chan...
    #js #javascript #itdoctor

ความคิดเห็น • 51

  • @ITDoctor
    @ITDoctor  2 ปีที่แล้ว

    Курс Frontend разработчик на HTML, CSS и JavaScript: stepik.org/z/113402

  • @suspiciouscandy1678
    @suspiciouscandy1678 3 ปีที่แล้ว +7

    Круто! Как мысли прочитал, как раз в эту сторону смотрел по документации ))

    • @majormalachi1901
      @majormalachi1901 3 ปีที่แล้ว

      a tip: watch series at InstaFlixxer. Been using it for watching all kinds of movies these days.

    • @adrieltucker4657
      @adrieltucker4657 3 ปีที่แล้ว

      @Major Malachi yea, have been watching on InstaFlixxer for since november myself :)

  • @АкимеУсеинова-с3е
    @АкимеУсеинова-с3е 3 ปีที่แล้ว +3

    Здорово!! Спасибо большое!!!!👍👍👍👍👍

  • @artemershov5998
    @artemershov5998 3 ปีที่แล้ว +5

    Спасибо!

    • @ITDoctor
      @ITDoctor  3 ปีที่แล้ว

      пожалуйста

  • @user-sf5iw5ud8r
    @user-sf5iw5ud8r 2 ปีที่แล้ว +1

    Спасибо большое! Очень помогли в нужное время!!!!

    • @ITDoctor
      @ITDoctor  2 ปีที่แล้ว

      пожалуйста

  • @AnyKeyPS280
    @AnyKeyPS280 2 ปีที่แล้ว +1

    Спасибо! Как раз искал

    • @ITDoctor
      @ITDoctor  2 ปีที่แล้ว

      Спасибо очень рад слышать

  • @user-rr7yr9ml9p
    @user-rr7yr9ml9p 2 ปีที่แล้ว +3

    Можно записать в файл! Для этого нужно создать блоб, потом использовать URL.createObjectURL и передать это в href ссылки

    • @ОлмосбекОйбеков
      @ОлмосбекОйбеков ปีที่แล้ว +1

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

  • @ufdyinfdt
    @ufdyinfdt ปีที่แล้ว +1

    спасибо, помогло

    • @ITDoctor
      @ITDoctor  ปีที่แล้ว

      пожалуйста

  • @dodokwak
    @dodokwak 3 ปีที่แล้ว +2

    Спасибо.
    5:42 наступила на эти грабли, забыв reader.readAsDataURL(myFile) (читала image)

  • @MsSymantec
    @MsSymantec 3 ปีที่แล้ว +3

    👍👍👍👍👍shik

  • @sia4281
    @sia4281 3 ปีที่แล้ว +1

    Создать простенький сервер на node.js --- а как это сделать где бы найти?

  • @vlad13holod
    @vlad13holod 3 ปีที่แล้ว +4

    Спасибо, красава. Прошу тебя сделай урок: я непонимаю как использовать JS в верстке она как пайтон для меня ничего не понятно

    • @LectorWeb
      @LectorWeb 3 ปีที่แล้ว +2

      JS в самой верстке не нужен. Верстка строится на HTML и CSS, a JS нужен для логики, например калькулятор, модальные окна, карусели и т.д.

    • @vlad13holod
      @vlad13holod 3 ปีที่แล้ว +2

      @@LectorWeb извиняюсь я плохо сформулирувал. Я имел ввиду модальние окна карусели итд.

    • @LectorWeb
      @LectorWeb 3 ปีที่แล้ว +2

      @@vlad13holod ааа, ну так-то да

    • @ITDoctor
      @ITDoctor  3 ปีที่แล้ว

      вот этот плейлист как раз таки посвящен таким полезным вещам: th-cam.com/play/PLuY6eeDuleIPyoo60E-DPECak0G46k6k8.html

    • @vlad13holod
      @vlad13holod 3 ปีที่แล้ว

      @@ITDoctor спасибо, посмотрю

  • @user-kh5vi4yi5t
    @user-kh5vi4yi5t 9 หลายเดือนก่อน

    Если вы работаете с небольшим обьемом данных посмотрите в сторону кукисов. Стандартное решение без головной боли

  • @user-je9bo1cz9r
    @user-je9bo1cz9r 3 ปีที่แล้ว +2

    Но как получить reader.result вне reader.onload, при условии, что reader.readAsDataURL и console.log(reader.result), написаны в одной функции друг за другом

    • @1369Samil
      @1369Samil 2 ปีที่แล้ว

      Вне onload никак не получится. FileReader работает асинхронно

  • @webschoolru778
    @webschoolru778 ปีที่แล้ว

    У js есть возможность сохранять файлы на диск, хоть и ограниченная. Хотите меньше ограничений - wasm модуль в помощь)

  • @user-jn9cb3pw7p
    @user-jn9cb3pw7p ปีที่แล้ว

    Здравствуйте, можно ли прочитать содержимое файла указав только имя файла в скрипте без его загрузки? (XMLHttpRequest() не помогает)

  • @sqrAnton
    @sqrAnton 3 ปีที่แล้ว +1

    И со строками и колонками в файле как работать?

  • @zerox1397
    @zerox1397 3 ปีที่แล้ว +3

    Ну почему нельзя было добавить в js запись файлов???!?!!?

    • @ITDoctor
      @ITDoctor  3 ปีที่แล้ว +4

      это было бы не безопасно. любой скрипт из браузера имел бы доступ к вашей файловой системе

    • @alexvolkov529
      @alexvolkov529 ปีที่แล้ว

      js может записывать файлы, но только в окружении nodejs. В браузерном окружении нельзя

  • @deanwichester6412
    @deanwichester6412 9 หลายเดือนก่อน

    а можно прочитать метаданные аудиофайла ?

  • @СергейАртемчук-ф5л
    @СергейАртемчук-ф5л 3 ปีที่แล้ว

    Динамически меняющийся файл считываю периодически (используя setInterval()) в массив, но изменения в файле не видны без 'толчка" (например прочесть другой файл или перезагрузить страницу) можно ли автоматически считать изменения?

    • @hackerpro6073
      @hackerpro6073 2 ปีที่แล้ว

      Например: поставить слушателя на клавиши и при нажатии которых будет загружаться файл повторно

  • @mushnikov35
    @mushnikov35 3 ปีที่แล้ว

    А если файл получить ajax с сервера и его прочитать ?

  • @NORTHERNVOID1337
    @NORTHERNVOID1337 ปีที่แล้ว

    А можно как-то получить файл dat не с компьютера пользователя, а сразу с сайта? Например: Где-то хранится файлик dat, который выводит своё значение при нажатии кнопки "показать". Допустим, кол-во посещений

    • @ITDoctor
      @ITDoctor  ปีที่แล้ว +1

      в программировании можно всё. почитайте тут habr.com/ru/post/14246/ может это не совсем то, но наверняка натолкнет на мысли в нужном направлении, а там уже загуглить, поискать изучить соответствующую тему придется.

    • @NORTHERNVOID1337
      @NORTHERNVOID1337 ปีที่แล้ว

      @@ITDoctor А я уже решил мою проблему иным путём, но всё равно спасибо!)

    • @МихаилНовиков-р6ч
      @МихаилНовиков-р6ч ปีที่แล้ว

      @@NORTHERNVOID1337 Ну и как решил? У меня тот же вопрос.

    • @NORTHERNVOID1337
      @NORTHERNVOID1337 ปีที่แล้ว

      @@МихаилНовиков-р6ч Ну как сказать... Я решил самым костыльным методом...

    • @МихаилНовиков-р6ч
      @МихаилНовиков-р6ч ปีที่แล้ว

      @@NORTHERNVOID1337 Решил, но это не то, как мне нужно. Таких решений, когда файл выбирает пользователь через форму, полный интернет. А мне нужно, чтобы путь к файлу был прописан в коде, и не нужно было диалоги открывать или файлы мышью перетаскивать. Например, чтение конфига из инишника или объектов из jsonа. Потому, что мне нужно решение, которое будет работать на локальной машине, но через браузер, и чтобы для решения простейшей прикладной задачи не городить кучу фреймворков, а обойтись связкой элементарных инструментов html + голый javascript. Но я уже понял, что javascript в стоке такого не умеет.

  • @tvitaly1
    @tvitaly1 ปีที่แล้ว

    Короче, погуглив составил кот загрузки содержимого файла в TextArea. Интересно, ту как нибудь можно задать начальный путь для выбора файла?
    function readFile(input,output) {
    let file = input.files[0];
    let reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function() {
    output.value = reader.result
    };
    reader.onerror = function() {
    alert("ОШИБКА ЗАГРУЗКИ ФАЙЛА:"+reader.error);
    };
    }

  • @pavel_dmitrievich
    @pavel_dmitrievich 2 ปีที่แล้ว

    Как называется тема на видео в VS Code?

    • @ITDoctor
      @ITDoctor  2 ปีที่แล้ว

      One monokai theme вроде как. Вот тут обзор th-cam.com/video/BS4XeyeAq7M/w-d-xo.html