Zuletzt geändert: 2018-10-19

Das Webinterface zum Esp8266 Spiffs Dateimanager.

spiffs.html

<!-- For more information visit: https://fipsok.de -->
<!DOCTYPE HTML>
<html lang="de">
   <head>
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <title>Esp8266 Datei Manager</title>
      <script>
         function list() {
           let myList = document.querySelector('main');
           fetch('json').then(function (response) {
             return response.json();
           }).then(function (json) {
             for (var i = 0; i < json.length - 1; i++) {
               let dir = `<li><a href ="${json[i].name}">${json[i].name}</a><small> ${json[i].size}</small><a href ="${json[i].name}"download="${json[i].name}"> Download </a>`;
               if (json[i].name != 'spiffs.html') {
                 dir += `or <a href ="${json[i].name}?delete=/${json[i].name}">Delete </a>`;
               }
               myList.insertAdjacentHTML('beforeend', dir);
             }
             myList.insertAdjacentHTML('beforeend', `<li><b>SPIFFS</b> belegt ${json[i].usedBytes} von ${json[i].totalBytes}`);
             free = json[i].freeBytes;
           });
         }
         function fileSize() {
           var nBytes = document.querySelector('input').files[0].size, sOutput = `${nBytes} Byte`;
           var a = document.querySelector('span'), b = document.querySelector('button');
           for (var aMultiples = [
             ' KB',
             ' MB'
           ], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
             sOutput = nApprox.toFixed(2) + aMultiples[nMultiple];
           }
           if (nBytes > free) {
             a.innerHTML = `<li><small> Dateigröße: ${sOutput}</small><strong style="color: red;"> Ungenügend Speicher frei </strong></li>`;
             b.setAttribute('disabled', 'disabled');
           } 
           else {
             a.innerHTML = `<li><b>Dateigröße:</b> ${sOutput} </li>`;
             b.removeAttribute('disabled');
           }
         }
         function jn() {
           return confirm(`Wirklich formatieren? Alle Daten gehen verloren.\nDu musst anschließend spiffs.html wieder laden.`);
		 }
         document.addEventListener('DOMContentLoaded', list);
      </script>
   </head>
   <body>
      <h2>ESP8266 Datei Manager</h2>
      <form action="/upload" method="POST" enctype="multipart/form-data"><input type="file" name="upload" onchange="fileSize()">
         <button type="submit" disabled>Upload</button>
      </form>
      <div>
         <span></span>
         <main></main>
      </div>
      <form action="/format" method="POST"><input class="button" type="submit" value="Format SPIFFS" onclick="return jn()"></form>
   </body>
</html>

Zurück