Kurze Scripte und Codeschnipsel ,bilder klein und gross hochladen umwandeln

bilder-klein-und-gross-hochladen-umwandeln.php

Quell Code

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<main>
    <p>Es wird ein Eingabefeld erzeugt, das Attribut multiple sorgt dafür, dass im Auswahldialog mehrere Dateien ausgewählt werden können </p>
    <form enctype="multipart/form-data" action="sortieren.php" method="POST">
    <input id='inputvalue' type='hidden' name='newsort' value='1' />
    <input type="text" id="text" name="name" oninput="myFunction(this)"  />
    <input type="file" id="files" name="files[]"  multiple  />
    <button type="submit" id="input1" name="action">Hochladen</button>
    
    </form>
          <script>
          function myFunction(txt) {
              var bt = document.getElementById('input1');
              if (txt.value != '') {
                  bt.disabled = false;
              }
              else {
                  bt.disabled = true;
              }
          }    
</script>
    <p>Ein Ausgabefeld zur Anzeige der ausgewählten Dateien:</p>
    <output id="list"><ul id="sortable"></ul></output> 
  </main>
<script>

function dateiauswahl(evt) {
            var dateien = evt.target.files; // FileList object
            var imgs = [], names = []; counter = 0, nrimgs = dateien.length, binchar = 97;
            // Auslesen der gespeicherten Dateien durch Schleife
            for (let i = 0; i < dateien.length; i++) {
                let f = dateien[i];
                names[i] = f.name;
                // nur Bild-Dateien
                if (!f.type.match('image.*')) {
                    nrimgs--;
                    continue;
                }
                let reader = new FileReader();
                reader.onload = function (e) {
                    console.log("loaded " + i)
                    imgs[i] = e.target.result;
                    counter++;
                    if (counter == nrimgs) {
                        // erzeuge Thumbnails.
                        for (var j = 0; j < imgs.length; j++) {
                            var img = document.createElement('img');
                            img.className = 'bild';
                            img.src = imgs[j];
                            img.title = names[j];
                            var li = document.createElement('li');
                            li.appendChild(img);
                            li.id = String.fromCharCode(97 + j);
                            counter++;
                            var sortable = document.getElementById("sortable");
                            sortable.appendChild(li);
                            binchar++;      
                            
                            $(function() {
                                $('#sortable').sortable({
                                   update: function(event, ui) {
                                      var productOrder = $(this).sortable('toArray').toString();
                                      console.log(productOrder);
                                      $('input[name="newsort"]').val(productOrder);
                                   }
                                });
                             });
                            
         }
                    }
                };
                // Bilder als Data URL auslesen.
                reader.readAsDataURL(f);
            };
        }
        // Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
        document.getElementById('files').addEventListener('change', dateiauswahl, false);
        </script>
        </body>
        </html>