Jquery 使用AJAX上载文件工作不正常”；未捕获引用错误“；

控制台上出现此错误：

Uncaught ReferenceError: uploadedCAPA is not defined
    at HTMLButtonElement.<anonymous> (profile:521)
    at HTMLButtonElement.dispatch (afd.js:1)
    at HTMLButtonElement.m.handle (afd.js:1)

html:

---

您试图引用一个名为

uploadedCAPA

的变量，但从未在任何地方定义过该变量

如果您只想发布表单内容，包括文件输入，那么我想您正在查找

FormData

。也许是这样的：

let formData = new FormData(document.querySelector('form'));
$.ajax({
     url: 'http://localhost/cakes/process.php',
     type: 'POST',
     data: formData,
     cache: false,
     contentType: false,
     processData: false,
     success: function () { /.../ },
     error: function () { /.../ }
})

contentType

和

processData

选项在这里与使用jQuery上载

多部分/表单数据

相关。但总的来说，您不能仅仅使用输入元素的名称作为变量，您需要从表单中捕获数据并将其发布到服务器

---

您还可以使用比

document.querySelector（'form'）

更具体的东西来标识表单元素。可能给它一个

id

并使用

document.getElementById

。

在上面的代码中，javascript编译器搜索名为uploadedCAPA的变量
数据：{file:uploadedCAPA}在此部分中，您从未在全局范围或局部变量中定义过

如果要使用javascript和jquery上传文件，首先必须使用javascript提供的方法new FormData（）以FormData的形式获取所有文件，以获取所有文件

像这样

const files = document.querySelector('[type=file]').files;
const formData = new FormData();
formData.append('file',files);

---

然后在ajax调用中，数据将是formData，如下所示：formData代替data:{file:uploadedCAPA}

我认为它没有从我的表格中发送数据，它显示了

成功

尺寸，但它没有上传图像，所以我认为它没有发送正确的数据，你能告诉我吗？我的php代码运行良好（没有ajax）。我尝试向ajax调用添加

enctype:“multipart/form data”

，但什么都没有changed@user236945896：调试时，具体在哪里失败？AJAX调用是否包含图像的数据？服务器端代码在做什么？它对函数执行警报

success:function（status，result，request）

结果：

status=undefined

，

result=undefined

，

request=OK

。我的php文件中的代码不可用executed@user236945896：“我的php文件中的代码未被执行”-听起来您需要调试该代码。如果AJAX请求成功发出，但服务器端代码没有达到预期效果，则开始调试该代码。

if (isset($_POST['sendImg'])) {
  move_uploaded_file(
    $_FILES['uploadedCAPA']['tmp_name'],
    'user/7c50b2fe-1003-11e9-a766-c89cdc4e9f5f/avatar/'.$_FILES['uploadedCAPA'][
      'name'
    ]
  );
}

let formData = new FormData(document.querySelector('form'));
$.ajax({
     url: 'http://localhost/cakes/process.php',
     type: 'POST',
     data: formData,
     cache: false,
     contentType: false,
     processData: false,
     success: function () { /.../ },
     error: function () { /.../ }
})

const files = document.querySelector('[type=file]').files;
const formData = new FormData();
formData.append('file',files);