Unable implementieren eine Funktionalität zum Hochladen mehrerer Bilder auf den Server

Question

Derzeit habe ich den folgenden Code, mit dem ich nur ein Bild auf den Server zu der Zeit hochladen kann. Aber ich möchte mehrere Bilder hochladen. Es macht mir nichts aus, wenn es mehrere Anfragen an den Server sendet, aber ich möchte den folgenden Code ersetzen, sodass ich mehrere Bilder gleichzeitig ziehen und ablegen kann und sie mit AJAX senden kann. Wie werde ich das erreichen können?

Ich habe versucht, einige Bibliotheken zu verwenden, die ich im Internet wie dropzone.js gefunden habe, aber es scheint, dass es nicht den Trick macht. Einige einfache Beispiele oder Tipps wären großartig! I würde es lieben von dir zu hören !

HTML-Code

<div> 
    <input type="file" name="mydata[]"/> 
    <span class="btn" onclick="imgToMyServer('$(this));">Fly Me to the Server ! </span> 
</div> 

JS Seite

<script> 
      function imgToMyServer(ob) { 

       var form = $('<form />'); 
       var files = ob.prev('input[type="file"]'); 
       var simplefile = files.prop('files')[0]; 

       var Myname = simplefile.name; 
       var input = $('<input name="mydata[][my_path]" value="path/' + Myname+ '"/>'); 
       switch (simplefile.type) { 
        case "image/jpeg": 
         break; 
        case "image/png": 
         break; 
        case "image/gif": 
         break; 
        default:'); 
         return false; 
         break; 
       } 

       files.after(files.clone()); 
       files.appendTo(form); 
       input.appendTo(form); 
       datas = new FormData(form[0]); 

       $.ajax({ 
        type: 'post', 
        processData: false, 
        contentType: false, 
        data: datas, 
        url: "https//www.sample.com/uploads_my_images", 
        async: true, 
        success: function (res) { 
        //Just happy 
        } 
       }); 
      } 
     </script> 

Answer 1

Was Sie brauchen, seine ganz einfach zuerst müssen Sie das multiple Attribut auf die Datei Eingabetyp hinzufügen, so dass es Sie mehrere Dateien auswählen können .

Dann braucht man die Anzahl der Bilder zu überprüfen, die ausgewählt werden, dann die Schleife durch die Anordnung der Bilder, die die Bilder dann dynamisch an den Formulardaten anhängen ausgewählt sind:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 

<div> 
    <input type="file" name="mydata[]" id ="multiFiles" multiple="multiple"> 
    <button id="upload" class="btn">Fly Me to the Server !</button> 

    <div id="msg"></div> 
</div> 

<script type="text/javascript"> 
      $(document).ready(function() { 
       $('#upload').on('click', function (e) { 
        e.preventDefault(); 
        var form_data = new FormData(); //create form data object 
        var num_files = document.getElementById('multiFiles').files.length; 
        for (var x = 0; x < num_files; x++) { 
         form_data.append("files[]", document.getElementById('multiFiles').files[x]); //append the files to the form data object 
        } 
        $.ajax({ 
         url: 'upload.php', 
         dataType: 'text', // what to expect back from the PHP script, could be json,html 
         cache: false, 
         contentType: false, 
         processData: false, 
         data: form_data, 
         type: 'post', 
         success: function (response) { 
          $('#msg').html(response); // display success response from the PHP script 
         }, 
         error: function (response) { 
          $('#msg').html(response); // display error response from the PHP script 
         } 
        }); 
       }); 
      }); 
     </script> 

Server:

<?php 

if (isset($_FILES['files']) && !empty($_FILES['files'])) { 
    $no_files = count($_FILES["files"]['name']); 
    for ($i = 0; $i < $no_files; $i++) { 
     if ($_FILES["files"]["error"][$i] > 0) { 
      echo "Error: " . $_FILES["files"]["error"][$i] . "<br>"; 
     } else { 
      if (file_exists('uploads/' . $_FILES["files"]["name"][$i])) { 
       echo 'File already exists : uploads/' . $_FILES["files"]["name"][$i]; 
      } else { 
       move_uploaded_file($_FILES["files"]["tmp_name"][$i], 'uploads/' . $_FILES["files"]["name"][$i]); 
       echo 'File successfully uploaded : uploads/' . $_FILES["files"]["name"][$i] . ' '; 
      } 
     } 
    } 
} else { 
    echo 'Please choose at least one file'; 
} 

NB: Ich habe keine Validierung der hochgeladenen Datei, ich gerade hochgeladen gerade, müssen Sie in der Client-und der Server-Seite validieren.