demo.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!--
  2. В этом примере:
  3. по нажатию кнопки "Загрузить файл" предлагается загрузить файл
  4. из файловой системы, после чего его содержимое отображается
  5. в поле textarea;
  6. по нажатию кнопки "Скачать файл" формируется файл с содержимым
  7. поля textarea, после чего этот файл отдается на скачивание
  8. -->
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <meta charset="utf-8">
  13. <style>
  14. button, textarea {display: block; margin: 10px auto;}
  15. textarea {width: 80%; height: 10em;}
  16. </style>
  17. </head>
  18. <body>
  19. <button type="button" id="fileGet">Загрузить файл</button>
  20. <textarea></textarea>
  21. <button type="button" id="filePut">Скачать файл</button>
  22. <script src="fileio.js"></script>
  23. <script>
  24. const dec = new TextDecoder(),
  25. taElem = document.querySelector("textarea");
  26. // Модифицируем кнопку "Загрузить файл", указывая ее ID,
  27. // функцию, которая будет выполняться при нажатии кнопки
  28. // (аргумент функции - содержимое загруженного файла как Unit8array)
  29. // и (не обязательно) допустимые типы файлов
  30. io.get(
  31. "fileGet",
  32. fileContent => taElem.value = dec.decode(fileContent)
  33. // , ".docx"
  34. );
  35. // Модифицируем кнопку "Скачать файл", указывая ее ID,
  36. // функцию, которая будет выполняться при нажатии кнопки
  37. // и возвращать содержимое отдаваемого файла, а также
  38. // MIME-тип отдаваемого файла и его имя
  39. io.put(
  40. "filePut",
  41. () => taElem.value,
  42. "text/plain",
  43. "myFile.txt"
  44. );
  45. </script>
  46. </body>
  47. </html>