表單提交後多輸入類型的'文件'字段變空

Question

我正在製作一個表單來上傳照片，而且我有多個no。輸入類型的「文件」字段在單個表單下具有不同的字段名稱。

此外，我使用ajax發送這些文件。我是PHP新手，我在搜索解決方案時花了大約6個小時的時間，並且處理了很多變體，但無法解決。

我面臨的問題是隻有一個字段的文件傳遞給PHP，而其他字段爲空。文件移動成功後只獲取一個字段的輸出。在檢查'print_r'後，我發現這些數組是空的。

我的圖片文件不超過250 KB和JPG。那麼沒有任何文件大小和類型問題。

HTML代碼（從PHP呼應AJAX請求後）：

<form action=\"upload.php\" method=\"POST\" enctype=\"multipart/form-data\" class=\"upload-inputs\"> 

    <div class=\"upload-wrap\"> 
     <input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\"> 
     <input type=\"file\" name=\"file1\" id=\"file\" class=\"inputfile\"> 
     <label for=\"file\">Browse</label> 
    </div>  

    <div class=\"upload-wrap\"> 
     <input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\"> 
     <input type=\"file\" name=\"file2\" id=\"file\" class=\"inputfile\"> 
     <label for=\"file\">Browse</label> 
    </div> 

    <div class=\"upload-wrap\"> 
     <input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\"> 
     <input type=\"file\" name=\"file3\" id=\"file\" class=\"inputfile\"> 
     <label for=\"file\">Browse</label> 
    </div>  

    <button class=\"manage-btn upload-btn\" type=\"submit\">Upload</button> 

</form> 

<div class=\"upload-alert\"></div> 

JQuery的& AJAX：

$(document).on('submit','.upload-inputs', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
       url : "upload.php", 
       method: "POST", 
       data : new FormData(this), 
       processData: false, 
       contentType: false, 
       success:function(mesg) 
       { 
        $(".upload-alert").html(mesg); 
       } 

      }); 
     }); 

不使用多個文件選擇，因爲在移動瀏覽器（Chrome）檢查後，我發現，它不允許在手機中選擇多個文件。所以使用不同的單個輸入字段。

'upload.php的' 代碼：

if($_SERVER['REQUEST_METHOD'] == 'POST') 
{ 
    // Having this same code for 'file2' & file3 below (Just changing the variable names to file2 & file3) 
    if(!empty($_FILES['file1'])) 
    { 
    $file1 = $_FILES['file1']; 

    $file1_name = $file1['name']; 
    $file1_tmp = $file1['tmp_name']; 
    $file1_error = $file1['error']; 

    $file1_size = $file1['size']; 
    $file1_size = $file1_size/1024; 
    $file1_size = number_format($file1_size, 0); 

    $file1_ext = explode('.', $file1_name); 
    $file1_ext = strtolower(end($file1_ext)); 
    $allowed = array('jpg'); 

     if (in_array($file1_ext, $allowed)) 
     { 
      if($file1_error === 0) 
      { 
       if($file1_size <= 2048) 
       { 
        $file1_name_new = uniqid(rand()) . ".$file1_ext"; 
        $file1_destination = 'profile_image/'.$file1_name_new; 

        // Output if successfully moved. 

        if (move_uploaded_file($file1_tmp, $file1_destination)) 
        { 
         echo " <div class=\"files-bar1\"> 
         <button class=\"manage-btn delete-image\">Delete</button>   
         <img class=\"image-thumb\" src=\"profile_image/$file1_name_new\"> 
         <label class=\"image-name\">$file1_name_new</label><br> 
         <p class=\"image-size\">$file1_size KB</p><br> 
         <p class=\"percentage\">_% Completed</p><br/> 
        <progress class=\"upload-progress\" min=\"0\" max=\"100\"></progress> 
         <label class=\"stop-uploading\">&#10006;</label> 
        </div>"; 
        } 

        else 
        { 
         echo "Sorry, something went wrong. Please try again later."; 
        } 
       } 

       else 
       { 
        echo "Image Size Must Be Under 2 MB."; 
       } 
      } 

      else 
      { 
       echo "Caught Error."; 
      } 
    } 

    else 
    { 
     echo "Only JPG/JPEG format is allowed."; 
    } 
} 

    else 
    { 
     echo "file1 Undefined."; 
    } 

} 

Answer 1

首先，你需要設置適當的標記的形式。

• 你爲何用斜線（/）刪除所有斜槓
• 同一ID不應該在同一個頁面
• 提供多次，如果你想，那麼你可以通過用戶multiple而不是創造更多的上傳多個文件輸入

所以您的標記應該是

<form action="upload.php" method="POST" enctype="multipart/form-data" class="upload-inputs"> 

    <div class="upload-wrap"> 
     <input placeholder="Choose a file.." class="file-name" type="text"> 
     <input type="file" name="file" id="file" class="inputfile" multiple max="3"> 
     <label for="file">Browse</label> 
    </div>  

    <input name="submit" id="submit" value="Upload" type="submit"> 

</form> 

腳本側 使用AJAX 之前的文件數據添加到您的腳本所以應該是

$(document).ready(function() { 
    $("#submit").click(function (e) { 
     e.preventDefault(); 

     var data = new FormData(); 
     jQuery.each(jQuery('#file')[0].files, function (i, file) { 
      data.append('file' + i, file); 
     }); 

     $.ajax({ 
      url: 'upload.php', 
      data: data, 
      cache: false, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      success: function (data) { 
       console.log(data); // To see output in console 
      } 
     }); 

    }); 
}); 

如果你想你的文件上傳限制爲只有3個，那麼你可以把限制太多。

$(document).ready(function() { 
    $("#submit").click(function (e) { 
     e.preventDefault(); 
     var $fileUpload = $("input[type='file']"); 
     if (parseInt($fileUpload.get(0).files.length) > 3) { 
      alert("You can only upload a maximum of 3 files"); 
      return false; 
     } else { 
      var data = new FormData(); 
      jQuery.each(jQuery('#file')[0].files, function (i, file) { 
       data.append('file' + i, file); 
      }); 

      console.log(data); 
      $.ajax({ 
       url: 'upload.php', 
       data: data, 
       cache: false, 
       contentType: false, 
       processData: false, 
       type: 'POST', 
       success: function (data) { 
        console.log(data); 
       } 
      }); 
     } 

    }); 
}); 

在upload.php你可以從file0, file1, file2...這樣接受了。

Array 
(
    [file0] => Array 
     (
      [name] => step1.jpg 
      [type] => image/jpeg 
      [tmp_name] => D:\wamp\tmp\phpE8A7.tmp 
      [error] => 0 
      [size] => 56187 
     ) 

    [file1] => Array 
     (
      [name] => step2.jpg 
      [type] => image/jpeg 
      [tmp_name] => D:\wamp\tmp\phpE8A8.tmp 
      [error] => 0 
      [size] => 56910 
     ) 

    [file2] => Array 
     (
      [name] => step3.jpg 
      [type] => image/jpeg 
      [tmp_name] => D:\wamp\tmp\phpE8A9.tmp 
      [error] => 0 
      [size] => 57051 
     ) 

    [file3] => Array 
     (
      [name] => taxi_service-1.png 
      [type] => image/png 
      [tmp_name] => D:\wamp\tmp\phpE8BA.tmp 
      [error] => 0 
      [size] => 7741 
     ) 

) 

如果有任何查詢，請發表評論。

Answer 2

這個問題解決了。由於在'label'和'input'標籤中使用了相同的ID，所以只有一個文件被php上傳。 Ajax代碼中不需要進行任何更改。

只需更改每個「標籤」和「輸入」標籤的ID即可。

正確的格式：

<form action=\"upload.php\" method=\"POST\" enctype=\"multipart/form-data\" class=\"upload-inputs\"> 

     <div class=\"upload-wrap\"> 
      <input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\"> 
      <input type=\"file\" name=\"file1\" id=\"file1\" class=\"inputfile\"> 
      <label for=\"file1\">Browse</label><br> 

      <input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\"> 
      <input type=\"file\" name=\"file2\" id=\"file2\" class=\"inputfile\"> 
      <label for=\"file2\">Browse</label><br> 

      <input placeholder=\"Choose a file..\" class=\"file-name\" type=\"text\"> 
      <input type=\"file\" name=\"file3\" id=\"file3\" class=\"inputfile\"> 
      <label for=\"file3\">Browse</label><br> 
     </div> 

</form>