表单提交后多输入类型的'文件'字段变空

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>