無法實現將多個圖像上傳到服務器的功能

Question

目前，我有以下代碼，可以讓我只將一張圖像上傳到服務器。 但我想要做的是上傳多個圖像。我不介意它是否會向服務器發送多個請求，但我想替換下面的代碼，以便我可以一次拖放或選擇多個圖像並使用ajax發送。我將如何能夠實現這一目標？

我試圖使用一些我在網上找到的庫，例如dropzone.js，但它似乎並沒有做到這一點。一些簡單的樣本或提示會很棒！我很想聽到你的消息！

HTML代碼

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

JS側

<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

你需要什麼的很簡單，首先您需要添加的文件輸入類型的multiple屬性，以便它可以讓你選擇多個文件。

然後，你需要檢查被選擇的圖像的數量，然後通過所選擇然後動態追加圖像將表單數據圖像陣列循環：

<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> 

服務器：

<?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'; 
} 

注意：我沒有對上傳的文件做任何驗證，我只是直接上傳 ，您需要在客戶端和服務器端進行驗證。