使用ajaxfileupload.js实现ajax上传文件php版

使用ajaxfileupload.js可以实现通过Ajax方式上传文件，本攻略将介绍如何使用ajaxfileupload.js上传文件并处理上传后的文件。

安装依赖

在使用ajaxfileupload.js之前需要安装jQuery，可以在官网下载，或者使用以下CDN：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

引入ajaxfileupload.js

下载ajaxfileupload.js并引入，或使用以下CDN：

<script src="https://cdn.jsdelivr.net/npm/ajaxfileupload/dist/ajaxfileupload.min.js"></script>

文件上传示例

接下来我们将通过一个简单的文件上传示例来演示如何使用ajaxfileupload.js上传文件，示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>文件上传示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ajaxfileupload/dist/ajaxfileupload.min.js"></script>
  </head>
  <body>
    <form>
      <input type="file" id="file" />
      <button type="button" id="btnUpload">上传</button>
    </form>
    <script>
      $('#btnUpload').click(function () {
        $.ajaxFileUpload({
          url: 'upload.php', // 服务器端接受文件的 URL
          secureuri: false, // 是否使用 HTTPS 协议
          fileElementId: 'file', // 文件上传控件的 ID
          dataType: 'json', // 返回数据的类型
          success: function (data) {
            alert(data.message); // 显示上传结果
          },
          error: function (data) {
            alert(data.message); // 显示上传错误消息
          }
        });
      });
    </script>
  </body>
</html>

在upload.php中，我们可以使用以下代码处理上传后的文件：

if ($_FILES['file']['error']) {
  echo json_encode(['code' => 1, 'message' => '上传失败']);
} else {
  $fileName = $_FILES['file']['name'];
  $tmpName = $_FILES['file']['tmp_name'];
  $destDir = './uploads/';
  $destName = $destDir . $fileName;
  if (move_uploaded_file($tmpName, $destName)) {
    echo json_encode(['code' => 0, 'message' => '上传成功']);
  } else {
    echo json_encode(['code' => 1, 'message' => '上传失败']);
  }
}

批量图片上传示例

接下来我们将通过一个批量图片上传示例来演示如何使用ajaxfileupload.js批量上传图片，示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>批量图片上传示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ajaxfileupload/dist/ajaxfileupload.min.js"></script>
  </head>
  <body>
    <form>
      <input type="file" id="file" multiple />
      <button type="button" id="btnUpload">上传</button>
    </form>
    <div id="preview"></div>
    <script>
      $('#btnUpload').click(function () {
        var files = $('#file')[0].files;
        var formData = new FormData();
        for (var i = 0, len = files.length; i < len; i++) {
          formData.append('file' + i, files[i]);
        }
        $.ajax({
          url: 'upload.php', // 服务器端接受文件的 URL
          type: 'POST',
          dataType: 'json', // 返回数据的类型
          data: formData,
          cache: false,
          contentType: false,
          processData: false,
          success: function (data) {
            var preview = $('#preview');
            preview.empty();
            for (var i = 0, len = data.length; i < len; i++) {
              var imgPath = data[i]['path'] + data[i]['filename'];
              preview.append('<img src="' + imgPath + '" />');
            }
          },
          error: function (data) {
            alert(data.message); // 显示上传错误消息
          }
        });
      });
    </script>
  </body>
</html>

在upload.php中，我们可以使用以下代码处理上传后的文件：

$destDir = './uploads/';
if (!file_exists($destDir)) {
  mkdir($destDir, 0777, true);
}
$result = [];
foreach ($_FILES as $key => $value) {
  if ($value['error'] == 0) {
    $fileName = uniqid() . '.' . pathinfo($value['name'], PATHINFO_EXTENSION);
    $destName = $destDir . $fileName;
    if (move_uploaded_file($value['tmp_name'], $destName)) {
      $result[] = ['filename' => $fileName, 'path' => $destDir];
    }
  }
}
echo json_encode($result);

以上就是使用ajaxfileupload.js实现ajax上传文件php版的完整攻略，希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用ajaxfileupload.js实现ajax上传文件php版 - Python技术站