PHP结合AJAX实现多图片一次性上传的代码纠错方案

原代码存在4个核心问题，逐一修复即可实现功能：

• jQuery选择器语法错误：属性选择器格式写错，无法选中目标file输入框
• 仅获取了文件名字符串，没有传递实际的File文件对象，后端无法拿到文件内容
• 没有遍历所有file输入框收集文件，仅尝试读取第一个输入框的内容
• FormData提交的字段名和后端接收的字段名不匹配，且键名带多余空格

修正后的HTML代码 #

注意：如果表格有多行file输入控件，需要把所有包含输入框的表格内容都包裹在form标签内，保证所有输入框都在表单域中。

<form enctype="multipart/form-data" id="qrUploadForm">  
  <table>
    <tr>
      <td>1</td>
      <td><img src='dist/img/qr_code.png' style='width: 30px; height: 30px'/></td>    
      <td>500</td>        
      <td>sukasari</td>   
      <td>Hak</td>
      <td><input type='file' class='qr_input_file' name='qr_upload_file_hidden[]' accept="image/*"/></td>
    </tr>
    <!-- 可以按需增加更多行的file输入，name保持qr_upload_file_hidden[]格式即可 -->
  </table>                           
</form>
<button type="button" id="btnSimpan_qr" class="btn btn-info">Simpan</button>

修正后的AJAX请求代码 #

遍历所有file输入框，将选中的文件对象逐个追加到FormData中，字段名和后端保持一致，不要带多余空格：

$(document).ready(function () {
  $("#btnSimpan_qr").click(function() { 
    var data = new FormData();
    // 选中所有name为qr_upload_file_hidden[]的文件输入框
    var fileInputs = $('input[name="qr_upload_file_hidden[]"]');
    
    fileInputs.each(function(index, input) {
      // 跳过未选择文件的输入框
      if(input.files && input.files[0]) {
        // 追加文件对象，注意键名必须带[]，和后端接收字段一致
        data.append('qr_upload_file_hidden[]', input.files[0]);
      }
    });

    // 如果需要传递其他表单参数，可以直接在这里追加
    // data.append('参数名', '参数值');
                
    $.ajax({
      url: 'proses_form/proses_simpanqr.php',
      type: 'POST',
      data: data,
      processData: false,
      contentType: false,                 
      dataType: "json",
      success: function(res) {
        // 上传成功后的业务逻辑，比如提示、刷新页面
        console.log('上传结果', res);
      },
      error: function(xhr) {
        // 上传失败的错误提示逻辑
        console.log('请求异常', xhr);
      }       
    });
  });
});

修正后的PHP后端接收代码 #

PHP接收到多文件数组后，按索引遍历处理文件即可，参考代码如下：

<?php
// 初始化返回结果
$response = ['code' => 0, 'msg' => '', 'data' => []];
$uploadPath = '../uploads/qr/'; // 替换为实际文件存储目录，需提前创建并开启写入权限

if(!empty($_FILES['qr_upload_file_hidden'])) {
  $fileArr = $_FILES['qr_upload_file_hidden'];
  $fileCount = count($fileArr['name']);

  // 遍历处理每个上传的文件
  for($i = 0; $i < $fileCount; $i++) {
    // 跳过上传出错的文件
    if($fileArr['error'][$i] != UPLOAD_ERR_OK) {
      continue;
    }

    $fileName = $fileArr['name'][$i];
    $tmpPath = $fileArr['tmp_name'][$i];
    $fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
    // 重命名文件避免同名覆盖
    $newFileName = uniqid() . '.' . $fileExt;
    $savePath = $uploadPath . $newFileName;

    // 移动临时文件到正式存储目录
    if(move_uploaded_file($tmpPath, $savePath)) {
      $response['data'][] = $newFileName;
    }
  }

  $response['code'] = 200;
  $response['msg'] = '成功上传'.count($response['data']).'个文件';
} else {
  $response['msg'] = '未接收到上传文件';
}

// 返回json结果给前端
echo json_encode($response);
exit;
?>

注意事项：

• 提前创建文件存储目录，给目录设置对应写入权限
• 如果需要单个输入框支持一次选择多个文件，可以给input加multiple属性，遍历的时候把该input下的所有文件都追加到FormData即可
• 生产环境建议增加文件后缀、文件大小校验逻辑，拦截非法文件上传

内容的提问来源于stack exchange，提问作者Azy Kumbara