html php ajax 上传多张图片 前端PHP代码

HTML、PHP和AJAX通常结合用于实现前端文件上传功能，特别是图像上传。以下是一个简单的例子，展示如何使用这些技术上传多张图片：

1. **HTML 部分** (表单):

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="images[]" multiple accept=".jpg, .jpeg, .png">
  <button type="submit">上传</button>
</form>

<div id="status"></div>

这里，`enctype="multipart/form-data"` 是为了支持文件上传，`multiple` 则允许用户一次选择多张图片。

2. **JavaScript (AJAX)** 部分 (假设使用jQuery)：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('#uploadForm').on('submit', function(event) {
    event.preventDefault(); // 阻止默认提交

    var formData = new FormData(this);
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false, // 忽略数据处理
      contentType: false, // 忽略内容类型
      success: function(response) {
        $('#status').text('上传成功：' + response);
      },
      error: function(xhr, status, error) {
        $('#status').text('上传失败：' + xhr.responseText);
      }
    });
  });
});
</script>

3. **PHP 后端代码** (upload.php)：

<?php
if ($_FILES['images']['error'] === UPLOAD_ERR_OK) {
  $dir = "uploads/";
  if (!is_dir($dir)) {
    mkdir($dir, 0755, true);
  }

  foreach ($_FILES['images']['tmp_name'] as $key => $tmp_name) {
    $image_name = uniqid() . '.' . $_FILES['images']['name'][$key];
    move_uploaded_file($tmp_name, $dir . $image_name);
    echo "$image_name uploaded.";
  }
} else {
  echo 'Error uploading file(s): ' . $_FILES['images']['error'];
}
?>

这个示例中，前端通过AJAX异步发送文件到PHP脚本，PHP检查并存储每个上传的图片。在实际项目中，还应该添加更严格的验证和错误处理。