Библиотека для ввода-вывода файлов в браузере
Александр Гольдин
a435884d40
Загрузить файлы ''
|
2 years ago | |
|---|---|---|
| LICENSE.txt | 2 years ago | |
| README.md | 2 years ago | |
| demo.html | 2 years ago | |
| fileio.js | 2 years ago | |
| fileioNoMin.js | 2 years ago |
README.md
fileio.js
Библиотека для ввода-вывода файлов в браузере
Лицензия ISC.
Использование
Библиотека определяет объект io с двумя методами io.get() и io.put().
Для использования этих методов в html-файле должны быть определены две/одна кнопки button (либо другие элементы, допускающие событие onclick) с текстом типа «Загрузить файл» и/или «Скачать файл». Методы io.get() и io.put() модифицируют эти кнопки, позволяя использовать их для загрузки файлов из файловой системы и для создания файла с последующей отдачей его на скачивание.
Метод io.get(buttonID, funcOnClick [,accept])
Аргументы:
buttonID— ID кнопки «Загрузить файл»;funcOnClick— функция, которая будет выполняться при нажатии этой кнопки (аргумент функции — содержимое загруженного файла как Unit8array);accept— строка с допустимыми типами файлов, напримерimage/png, image/jpeg. В качестве типа допустимо использовать также расширение файлов с точкой спереди (например,.doc); разрешается подстановочный знак «звездочка» (например,image/*). Допустимые типы перечисляются в строке через зарятую; пробел после запятой не обязателен.
Метод io.put(buttonID, funcReturnCont, mime, fileName)
Аргументы:
buttonID— ID кнопки «Скачать файл»;funcReturnCont— функция, которая будет выполняться при нажатии этой кнопки и возвращать содержимое отдаваемого файла;mime— MIME-тип отдаваемого файла (например,text/plain);fileName— имя отдаваемого файла (например,myFile.txt).
Пример
Пример использования библиотеки приведен в файле demo.html:
<!--
В этом примере:
по нажатию кнопки "Загрузить файл" предлагается загрузить файл
из файловой системы, после чего его содержимое отображается
в поле textarea;
по нажатию кнопки "Скачать файл" формируется файл с содержимым
поля textarea, после чего этот файл отдается на скачивание
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
button, textarea {display: block; margin: 10px auto;}
textarea {width: 80%; height: 10em;}
</style>
</head>
<body>
<button type="button" id="fileGet">Загрузить файл</button>
<textarea></textarea>
<button type="button" id="filePut">Скачать файл</button>
<script src="fileio.js"></script>
<script>
const dec = new TextDecoder(),
taElem = document.querySelector("textarea");
// Модифицируем кнопку "Загрузить файл", указывая ее ID,
// функцию, которая будет выполняться при нажатии кнопки
// (аргумент функции - содержимое загруженного файла как Unit8array)
// и (не обязательно) допустимые типы файлов
io.get(
"fileGet",
fileContent => taElem.value = dec.decode(fileContent)
// , ".docx"
);
// Модифицируем кнопку "Скачать файл", указывая ее ID,
// функцию, которая будет выполняться при нажатии кнопки
// и возвращать содержимое отдаваемого файла, а также
// MIME-тип отдаваемого файла и его имя
io.put(
"filePut",
() => taElem.value,
"text/plain",
"myFile.txt"
);
</script>
</body>
</html>