使用 PHP 上传基本的 jQuery Ajax 文件

Question

我一直在尝试通过 ajax 表单上传基本文件，但没有成功。我正在寻找最基本的基础知识，但我通过搜索找到的任何东西都没有。

我已经搞砸了大约 8 个小时，并且尝试了至少十几种不同的方法，但都无法成功上传任何内容。

我已尽我所能将代码范围缩小到最简单的必需品。

我的 JavaScript 是这样的：

function uploadFile(param) { //Upload File
          $.ajax({
            url: "modules/upload/upload.php",
            type: "post",
            data: new FormData($(param)[0]),
              cache: false,
              contentType: false,
              processData: false,
            success: function (data) {
                console.log(data);
            }
          });
}

调用：

$(".app-canvas").on('change', ".fileUpload", function () {
uploadFile($(this));
});

和 PHP：

<?php
$sourcePath = $_FILES['driver_licence_image']['tmp_name'];       // Storing source path of the file in a variable
$targetPath = "uploads/".$_FILES['driver_licence_image']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file
?>

Answer 1

FormData 将 HTMLFormElement 作为其构造函数的参数，您正在传递看起来像文件输入的内容。要从表单元素添加文件，您必须使用 append。

$(".app-canvas").on('change', ".fileUpload", uploadFile);

function uploadFile() { //Upload File
      var fd = new FormData();
      fd.append('driver_licence_image', this.files[0]);
      $.ajax({
        url: "modules/upload/upload.php",
        type: "post",
        data: fd,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          console.log(data);
        }
      });
}

附言$(param)[0] 等价于param（param 为dom 节点时），请不要这样做。