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

Posted 2023-05-09

【中文标题】使用 PHP 上传基本的 jQuery Ajax 文件

【英文标题】：Basic jQuery Ajax file upload with PHP

【发布时间】：2018-09-24 08:38:28

【问题描述】：

我一直在尝试通过 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
?>

【问题讨论】：

您看到了什么错误？你的 php 代码执行了吗？

是的，php正在执行并且没有返回任何错误

让我们尝试将 ajax header 设置为 'Content-Type': 'multipart/form-data'

【参考方案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 节点时），请不要这样做。

【讨论】：

无法读取未定义的属性“0”。参数应该是文件上传输入

我更改了附加事件处理程序的方式，因此上下文将是文件输入