Zuletzt geändert: 2019-09-23

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">
      <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>`;
			   dir += `<a href ="${json[i].name}"download="${json[i].name}"> Download </a>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}`);
			 document.querySelectorAll('[href*=delete]').forEach((node) => {
			   node.addEventListener('click', () => {
	             if (!confirm('Sicher!')) event.preventDefault();
	           });
		     });
             free = json[i].freeBytes;
           });
         }
         function fileSize() {
           let bytes = event.target.files[0].size;
           let a = document.querySelector('span'), b = document.querySelector('[value=Upload]');
           let sizes = [' Byte', ' KB', ' MB'];
           let i = Math.floor(Math.log(bytes) / Math.log(1024));
           let sOutput = parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
           if (bytes > 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()">
         <input type="submit" value="Upload" disabled>
      </form>
      <div>
         <span></span>
         <main></main>
      </div>
      <form action="/format" method="POST"><input type="submit" value="Format SPIFFS" onclick="return jn()"></form>
   </body>
</html>

Zurück