在 CodeIgniter 中使用 Ajax 和 PHP 上传多个图像文件,可以按照以下步骤进行操作:

  1. 创建一个 HTML 表单,用于选择要上传的多个图像文件。在表单中添加一个文件输入字段,并设置 multiple 属性,以允许选择多个文件。
<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="images[]" multiple>
  <input type="submit" value="上传">
</form>
  • 1.
  • 2.
  • 3.
  • 4.
  1. 在 PHP 脚本中,使用 $_FILES 数组来获取上传的文件信息。遍历 $_FILES['images'] 数组,对每个文件进行处理。
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 获取上传的文件信息
  $files = $_FILES['images'];

  // 遍历文件数组
  foreach ($files['name'] as $key => $name) {
    // 获取文件的临时路径
    $tmp_name = $files['tmp_name'][$key];

    // 获取文件的类型
    $type = $files['type'][$key];

    // 获取文件的大小
    $size = $files['size'][$key];

    // 移动文件到指定的目录
    move_uploaded_file($tmp_name, 'uploads/'. $name);
  }
}
?>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  1. 在上述 PHP 脚本中,使用 move_uploaded_file 函数将上传的文件移动到指定的目录。你可以根据需要修改 uploads/ 为你实际的上传目录。
  2. 在 JavaScript 中,使用 Ajax 发送表单数据到 PHP 脚本。可以使用 XMLHttpRequest 对象或 jQuery 的 ajax 方法来实现。
// 使用 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php');
xhr.setRequestHeader('Content-Type','multipart/form-data');

var formData = new FormData();
formData.append('images[]', document.getElementById('images').files[0]);

xhr.send(formData);

// 使用 jQuery 的 ajax 方法
$.ajax({
  url: 'upload.php',
  type: 'POST',
  data: new FormData($('#form')[0]),
  processData: false,
  contentType: false,
  success: function(response) {
    // 处理上传成功的响应
  },
  error: function(xhr, status, error) {
    // 处理上传失败的响应
  }
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  1. 在 PHP 脚本中,处理上传成功或失败的情况,并返回相应的响应给 JavaScript。

以上是一个基本的示例,展示了如何在 CodeIgniter 中使用 Ajax 和 PHP 上传多个图像文件。你可以根据实际需求进行进一步的修改和扩展。

请注意,确保在服务器上设置正确的文件上传权限,并处理可能出现的错误情况。此外,还可以添加文件验证、图像压缩等功能来增强上传功能的实用性。