Форум программистов, компьютерный форум, киберфорум
Наши страницы
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Загрузка текстового файла на TypeScript

Запись от 8Observer8 размещена 10.07.2019 в 15:00
Обновил(-а) 8Observer8 11.07.2019 в 11:04

Мой пример использует два способа загрузки:
  • XMLHTTPRequest - загрузка текстового файла из программы с HTTP сервера
  • FileReader - загрузка по кнопке

Открыть пример в песочнице.

Исходники на GitHub: https://github.com/8Observer8/text-file-loader_typescript

Инструкция по сборке Debug версии. У вас должен быть установлен Node.js и TypeScript. Один раз установите модуль typescript глобально:
Цитата:
npm typescript -g
Установите модули из package.json командой, находясь в директории проекта:
Цитата:
npm install
Скомпилируйте пример командой:
Цитата:
npm run build-debug
Поставьте один раз модуль http-server глобально:
Цитата:
npm http-server -g
Запустите локальный сервер командой:
Цитата:
http-server
Перейдите в браузер Chrome и введите в адресной строке: localhost:8080

Когда вы поменяете код и произвели компиляцию, перейдите в браузер Chrome, откройте консоль разработчика (Ctrl+Shift+J), нажмите правой кнопкой мыши по значку "Перегрузить" (в левом верхнем углу браузера - круговая стрелка), выбираете "Empty Cache and Hard Reload".

Program.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { TextLoader } from "./TextLoader";
 
class Program
{
    public static Main(): void
    {
        let filePath = "https://www.w3.org/TR/PNG/iso_8859-1.txt";
 
        TextLoader.Load(filePath, this.OnLoadFile);
    }
 
    public static OnLoadFile(fileContent: string): void
    {
        let output = document.getElementById("output");
        output.textContent = fileContent;
    }
}
 
// Debug Version
Program.Main();
 
// Release Version
// window.onload = () => Program.Main();
TextLoader.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export class TextLoader
{
    public static Load(filePath: string, callback: (fileContent: string) => void): void
    {
        let request = new XMLHttpRequest();
 
        request.onreadystatechange = () =>
        {
            if (request.readyState === 4 && request.status !== 404)
            {
                callback(request.responseText);
            }
        };
 
        request.open("GET", filePath, true);
        request.send();
    }
}
Изображения
 
Размещено в Без категории
Просмотров 102 Комментарии 1
Всего комментариев 1
Комментарии
  1. Старый комментарий
    Аватар для 8Observer8
    Добавил в шапку темы этот текст:

    Мой пример использует два способа загрузки:
    • XMLHTTPRequest - загрузка текстового файла из программы с HTTP сервера
    • FileReader - загрузка по кнопке

    Открыть пример в песочнице.

    Исходники на GitHub: https://github.com/8Observer8/text-file-loader_typescript
    Запись от 8Observer8 размещена 11.07.2019 в 11:04 8Observer8 вне форума
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru