PHP+Ajax+JS实现多图上传-前端开发

下面我将为您详细讲解“PHP+Ajax+JS实现多图上传”的完整攻略。

下面我将为您详细讲解“PHP+Ajax+JS实现多图上传”的完整攻略。

总体思路

实现多图上传，我们需要通过Ajax技术将多张图片逐一传递到服务器端，再通过PHP将图片保存到指定目录中。下面是详细的步骤：

使用HMTL5的file类型的input框架，在客户端实现图片上传。
使用JavaScript遍历的方式，依次将图片上传到服务器端。
JavaScript调用Ajax技术，将图片文件传递给服务器端。
服务器端接收Ajax传递过来的图片文件并保存到指定目录。
将上传结果以JSON格式返回给客户端。

示例1

以下是一个简单但完整的多图上传示例，前端使用原生HTML5+JS，后端使用PHP实现。

前端代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多图上传示例</title>
</head>
<body>
  <input type="file" id="file" name="file" multiple>
  <button type="button" onclick="upload()">上传</button>
  <div id="result"></div>

  <script>
  function upload() {
    var files = document.getElementById('file').files;
    var formData = new FormData();
    for (var i = 0; i < files.length; i++) {
      formData.append('file[]', files[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var result = JSON.parse(xhr.responseText);
        var div = document.getElementById('result');
        div.innerHTML = '';
        for (var i = 0; i < result.length; i++) {
          div.innerHTML += '<img src="' + result[i] + '">';
        }
      }
    };
    xhr.open('POST', 'upload.php');
    xhr.send(formData);
  }
  </script>
</body>
</html>

后端代码：

<?php
$allowedExts = array('jpg', 'jpeg', 'gif', 'png');
$uploadDir = 'uploads/';
$uploadedFiles = array();
foreach ($_FILES['file']['name'] as $key => $name) {
  $tmp_name = $_FILES['file']['tmp_name'][$key];
  $extension = substr($name, strrpos($name, '.') + 1);
  if (!in_array($extension, $allowedExts)) {
    continue;
  }
  $filePath = $uploadDir . uniqid() . '.' . $extension;
  if (move_uploaded_file($tmp_name, $filePath)) {
    array_push($uploadedFiles, $filePath);
  }
}
echo json_encode($uploadedFiles);
?>

示例2

下面是使用jQuery实现的多图上传示例。

前端代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>多图上传示例</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="file" name="file" multiple>
  <button type="button" onclick="upload()">上传</button>
  <div id="result"></div>

  <script>
  function upload() {
    var formData = new FormData();
    $('input[type=file]').each(function() {
        var files = this.files;
        for (var i = 0; i < files.length; i++) {
          formData.append('file[]', files[i]);
        }
    });
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false,
      success: function(result) {
        var div = $('#result');
        div.empty();
        for (var i = 0; i < result.length; i++) {
          div.append('<img src="' + result[i] + '">');
        }
      }
    });
  }
  </script>
</body>
</html>

后端代码和示例1相同。

希望这份攻略能对您有所帮助！

总体思路

示例1

示例2

基础教程推荐