Question

此错误出现在控制台上：

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

当我单击http://localhost/cakes/process.php时，我想向$("#upload")发送POST请求，但是我收到此错误uploadedCAPA is not defined，为什么？

我的代码：

function showLoading() {
  document.getElementById('loading').style = 'visibility: visible';
}
function hideLoading() {
  document.getElementById('loading').style = 'visibility: hidden';
}
$('#upload').click(function() {
  //call show loading function here
  showLoading();
  $.ajax({
    type: 'POST',
    url: 'http://localhost/cakes/process.php',
    enctype: 'multipart/form-data',
    data: {
      file: uploadedCAPA
    },
    success: function() {
      //call hide function here
      hideLoading();
      alert('Data has been Uploaded: ');
    },
    error: function(a) {
      //if an error occurs
      hideLoading();
      alert(
        'An error occured while uploading data.\n error code : ' + a.statusText
      );
    }
  });
});

html：

<form method="post" enctype="multipart/form-data">
  <input id="capaUpload" type="file" name="uploadedCAPA" />
  <button type="button" id="upload" name="sendImg">Upload</button>
</form>

php：

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

Answer 1

您正在尝试引用名为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上传multipart/form-data有关。但基本上，总的来说，您不能仅将输入元素的名称用作变量，还需要从表单中捕获数据并将其发布到服务器。

您还可以使用比document.querySelector('form')更具体的内容来标识表单元素。也许给它一个id并改用document.getElementById。

Answer 2

在您上面的代码中，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代替数据：{文件：uploaddCAPA};

使用AJAX上传文件无法正常工作“ Uncaught ReferenceError”

2 个答案: