upload_script.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <html>
  2. <head>
  3. <link href="firework.css" rel="stylesheet">
  4. <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
  5. <script type="text/javascript" src="firework.js"></script>
  6. </head>
  7. </body>
  8. <table class="fixed" border="0" style="font-family: arial">
  9. <col width="300px" /><col width="200px" />
  10. <tr><td>
  11. <h2>ESP32 File Server</h2>
  12. </td><td>
  13. <button id="dirup" type="button" onclick="dirup()">Directory up</button>
  14. </td>
  15. <td>
  16. <table border="0">
  17. <tr>
  18. <td>
  19. <label for="newfile">Upload a file</label>
  20. </td>
  21. <td colspan="2">
  22. <input id="newfile" type="file" onchange="setpath()" style="width:100%;">
  23. </td>
  24. </tr>
  25. <tr>
  26. <td>
  27. <label for="filepath">Set path on server</label>
  28. </td>
  29. <td>
  30. <input id="filepath" type="text" style="width:100%;">
  31. </td>
  32. <td>
  33. <button id="upload" type="button" onclick="upload()">Upload</button>
  34. </td>
  35. </tr>
  36. </table>
  37. </td></tr>
  38. </table>
  39. <script type="text/javascript" src="/fileserver/html/common.js">
  40. </script>
  41. <script language="JavaScript">
  42. function setpath() {
  43. var fileserverpraefix = "/fileserver";
  44. var anz_zeichen_fileserver = fileserverpraefix.length;
  45. var default_path = window.location.pathname.substring(anz_zeichen_fileserver) + document.getElementById("newfile").files[0].name;
  46. document.getElementById("filepath").value = default_path;
  47. }
  48. function dirup() {
  49. var str = window.location.href;
  50. str = str.substring(0, str.length-1);
  51. var zw = str.indexOf("/");
  52. var found = zw;
  53. while (zw >= 0)
  54. {
  55. zw = str.indexOf("/", found+1);
  56. if (zw >= 0)
  57. found = zw;
  58. }
  59. var res = str.substring(0, found+1);
  60. window.location.href = res;
  61. }
  62. function upload() {
  63. var filePath = document.getElementById("filepath").value;
  64. var upload_path = "/upload/" + filePath;
  65. var fileInput = document.getElementById("newfile").files;
  66. /* Max size of an individual file. Make sure this
  67. * value is same as that set in file_server.c */
  68. var MAX_FILE_SIZE = 8000*1024;
  69. var MAX_FILE_SIZE_STR = "8000KB";
  70. if (fileInput.length == 0) {
  71. firework.launch('No file selected!', 'danger', 30000);
  72. } else if (filePath.length == 0) {
  73. firework.launch('File path on server is not set!', 'danger', 30000);
  74. } else if (filePath.length > 100) {
  75. firework.launch('Filename is to long! Max 100 characters.', 'danger', 30000);
  76. } else if (filePath.indexOf(' ') >= 0) {
  77. firework.launch('File path on server cannot have spaces!', 'danger', 30000);
  78. } else if (filePath[filePath.length-1] == '/') {
  79. firework.launch('File name not specified after path!', 'danger', 30000);
  80. } else if (fileInput[0].size > MAX_FILE_SIZE) {
  81. firework.launch("File size must be less than " + MAX_FILE_SIZE_STR + "!", 'danger', 30000);
  82. } else {
  83. document.getElementById("newfile").disabled = true;
  84. document.getElementById("filepath").disabled = true;
  85. document.getElementById("upload").disabled = true;
  86. var file = fileInput[0];
  87. var xhttp = new XMLHttpRequest();
  88. xhttp.onreadystatechange = function() {
  89. if (xhttp.readyState == 4) {
  90. if (xhttp.status == 200) {
  91. document.open();
  92. document.write(xhttp.responseText);
  93. document.close();
  94. } else if (xhttp.status == 0) {
  95. firework.launch('Server closed the connection abruptly!', 'danger', 30000);
  96. UpdatePage(false);
  97. } else {
  98. firework.launch('An error occured: ' + xhttp.responseText, 'danger', 30000);
  99. UpdatePage(false);
  100. }
  101. }
  102. };
  103. xhttp.open("POST", upload_path, true);
  104. xhttp.send(file);
  105. }
  106. }
  107. </script>
  108. </body>
  109. </html>