Beiträge von KATERchen

var del = [];
          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 btn = document.createElement('img');
                            btn.className = 'delete';
                            btn.setAttribute('name' , j);
                            btn.src = 'wagen.gif';
                            
                            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.appendChild(btn);
                            
                            // das Listenelement bekommt einen fortlaufenden Index als ID
                            li.id = j;
                            var sortable = document.getElementById("sortable");
                            sortable.appendChild(li);
                            del.push(j);
                        }
                        
                        $(function () {
                            $('#sortable').sortable({
                                update: function (event, ui) {
                                    var productOrder = $(this).sortable('toArray').toString();
                                    console.log(productOrder);
                                    $('input[name="newsort"]').val(productOrder);
                                }
                            });
                        });
                        

                    }
                    // Wenn Bilder aus der Auswahl entfernt werden
                          $("#sortable .delete").click(function() { 
                            var del_org = $(this).attr('name');    
                            $(this).parent().remove();
                            del.splice(del_org, 1, '');
                            console.log(del);
                            $('input[name="del_org"]').val(del);
                        });
                    
                };
                
                // 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>
// prüfen ob Verzeichnis existiert
function check(txt){
    var url = ($("#text").val());
  var url = './upload/' + url + '/';
console.log(url);
    $.get(url)
        .done(function() { 

            $('#frage').animate({"opacity": "1"}, 500);
            $('#background').animate({"opacity": ".70"}, 500);
            $('#background, #frage').css({"display": "block" , "margin": "1% auto"});
            console.log('exists code'); 
        }).fail(function() { 

            
            console.log('not exists code'); 
})
}
</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);

<?php
  $sortArray = explode(",",$_POST['newsort']??"");

  if(!empty($_FILES)){
    error_reporting(E_ALL);
    ini_set('display_errors', '1');

  $upload       = "./upload/";
  $counter      = count($_FILES['files']['tmp_name']);
    $sourcePath[] = $_FILES['files']['tmp_name']; // Storing source path of the file in a variable
    $targetPath[] = $_FILES['files']['name']; // Target path where file is to be stored
    $name         = $_POST['name'];
    
    mkdir("./upload/" . $name, 0700);
    mkdir("./upload/" . $name . "/tmp/", 0700);
    
    $bilder_verzeichnis = $upload . $name . "/";
    $tmp_verzeichnis    = $upload . $name . "/tmp/";
    // Größe der ausgegebenen Bilder
    $XL_groesse = 600;
     $L_groesse = 175;
     $M_groesse = 45;
     
    // Bilder werden in tmp-Ordner geladen
    for($a = 0; $a < $counter; $a++){
      
      $i           = $a + 97;
      $up_name     = $name . chr($i) . ".jpg";
      $tmpFile = $_FILES['files']['tmp_name'][$a];
            
      if ($tmpFile != ""){
                
        $newFilePath = $upload . $name . "/tmp/" ;
        
        //Upload der Datei in den Ordner 
        if(move_uploaded_file($tmpFile, $newFilePath . $up_name)) {
        }
      }
    }     
    
    // Bilder aus tmp-Verzeichnis lesen
    if(is_dir($bilder_verzeichnis)) {   // existiert das Verzeichnis?
      $files       = scandir($tmp_verzeichnis);  // Dateinamen in Array einfügen
      $files       = array_splice($files, 2); // Entfernt die ersten beiden Einträge . und ..
      $files_count = count($files);
    }
    
    
// Ist eine Umsortierung erfolgt: 
    if($_POST['newsort'] != 1){

      $sortArray = explode(",",$_POST['newsort']??"");

      $c = array_combine($files, $sortArray);

      // Zuordnen der neuen zu den alten Namen und umbennenen in tmp_dateiname
      foreach($c AS $oldName => $newName){

        $oldNameDir = $tmp_verzeichnis . $oldName;
        $newNameDir    = $tmp_verzeichnis . "tmp_" . $name . $newName . ".jpg";
        
        echo 'oldName:' . $oldNameDir . ' = ';
        echo 'newName:' . $newNameDir . '<br>';
        
        copy($oldNameDir , $newNameDir);

      }
    }
    
    // ist keine Sortierung erfolgt, umbenennen in tmp_dateiname
    else{
      foreach($files AS $oldName){
        $oldNameDir = $tmp_verzeichnis . $oldName;
        $newNameDir = $tmp_verzeichnis . "tmp_" . $oldName;
        copy($oldNameDir , $newNameDir);
        unlink($oldNameDir);
      }
    }

    
    // tmp-Verzeichnis auslesen
    if(is_dir($bilder_verzeichnis)) {   // existiert das Verzeichnis?
      $org_files = scandir($tmp_verzeichnis);  // Dateinamen in Array einfügen
      $org_files = array_splice($org_files, 2); // Entfernt die ersten beiden Einträge . und ..
    }

//     Bildgröße erstellen
    foreach($org_files AS $tmp_files){
      
      $XL_name = 'XL_' . str_replace("tmp_","",$tmp_files);
      $L_name  =  'L_' . str_replace("tmp_","",$tmp_files);
      $M_name  =  'M_' . str_replace("tmp_","",$tmp_files);
      $XL_size = GetImageSize($tmp_verzeichnis . $tmp_files);

    if($XL_size[1] > 500){
      
      $breite = $XL_size[0];
      $hoehe =  $XL_size[1];

      if($XL_size[2]==2) {
        
        // Erstellen XL_Bilder
        $neueBreite=intval($breite*$XL_groesse/$hoehe);
        $altesBild=ImageCreateFromJPEG($newFilePath . $tmp_files);
        $neuesBild=imagecreatetruecolor($neueBreite,$XL_groesse);
        ImageCopyResized($neuesBild,$altesBild,0,0,0,0,$neueBreite,$XL_groesse,$breite,$hoehe);
        ImageJPEG($neuesBild , $bilder_verzeichnis . $XL_name);
        ImageDestroy($neuesBild) ;
        ImageDestroy($altesBild) ;
        
        // Erstellen L_Bilder
        $neueBreite=intval($breite*$L_groesse/$hoehe);
        $altesBild=ImageCreateFromJPEG($newFilePath . $tmp_files);
        $neuesBild=imagecreatetruecolor($neueBreite,$L_groesse);
        ImageCopyResized($neuesBild,$altesBild,0,0,0,0,$neueBreite,$L_groesse,$breite,$hoehe);
        ImageJPEG($neuesBild , $bilder_verzeichnis . $L_name);
        ImageDestroy($neuesBild) ;
        ImageDestroy($altesBild) ;
        
        // Erstellen M_Bilder
        $neueBreite=intval($breite*$M_groesse/$hoehe);
        $altesBild=ImageCreateFromJPEG($newFilePath . $tmp_files);
        $neuesBild=imagecreatetruecolor($neueBreite,$M_groesse);
        ImageCopyResized($neuesBild,$altesBild,0,0,0,0,$neueBreite,$M_groesse,$breite,$hoehe);
        ImageJPEG($neuesBild , $bilder_verzeichnis . $M_name);
        ImageDestroy($neuesBild) ;
        ImageDestroy($altesBild) ;
      }
    }
    unlink($tmp_verzeichnis . $tmp_files);

    }
    rmdir($tmp_verzeichnis);
    
  }
  
  
?>
  <a href="test.php">Zurück</a>

<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="test_up.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" disabled>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>

function dateiauswahl(evt) {
        var dateien = evt.target.files; // FileList object

        var counter = 97;
        // Auslesen der gespeicherten Dateien durch Schleife
        for (var i = 0, f; f = dateien[i]; i++) {
            
            
          
          // nur Bild-Dateien
          if (!f.type.match('image.*')) {
            continue;
          }

          var reader = new FileReader();

          reader.onload = (function(theFile) {
            return function(e) {
              // erzeuge Thumbnails.
                
              var img = document.createElement('img');         
              img.className = 'bild';          
              
              img.src   = e.target.result;
              img.title = theFile.name;
              
              var li    = document.createElement('li');
              li.appendChild(img); 
              li.id = String.fromCharCode(counter);
              counter++;
              var sortable = document.getElementById("sortable");
              sortable.appendChild(li);

              
              $(function() {
                  $('#sortable').sortable({
                     update: function(event, ui) {
                        var productOrder = $(this).sortable('toArray').toString();
                        console.log(productOrder);
                        $('input[name="newsort"]').val(productOrder);
                     }
                  });
               });
            };
          })(f);

          // 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);