Javascript 如何使用filepond插件、ajax和php，服务器上未检测到文件名

我正在尝试将文件上载到xammp服务器。我无法访问它上载的文件。我怀疑这个链接

服务器：'http://localhost/“

，因为当我将其更改为在服务器端处理数据的PHP文件名时，它就可以工作了

但我还在表单上添加了另一个名为username的字段，请看下面的代码，我想将它们与Ajax结合在一个提交事件中，但我不知道这种结合

  //initialize file pond with jquery plugin
  $('#file').filepond({
    allowMultiple: false,
    server: 'http://localhost/'
  });
  //ajax

$("form").on('submit', function(e) {
  $.ajax({
    url: 'send.php',
    type: 'POST',
    data: new FormData(this),
    dataType: 'JSON',
    contentType: false,
    cache: false,
    processData: false,
  }).done(function(data) {
    if (data.success == false) {
      if (data.errors.username) {
        $('#username').append('<span class="text-danger">' + data.errors.username + '</span>');
      }
      if (data.errors.file) {
        $('#file').append('<span class="text-danger">' + data.errors.file + '</span>');
      }
    }
  });
  
  e.preventDefault();
});

//my form field between form tag
<form method="POST" enctype="multipart/form-data"> 
   <input type="text" name="username" id="username">
   <input type="file" name="file" id="file">
</form>

//php code validate file and name
$errors = [];
if(empty($_FILES['username'])) {
    $errors['username'] = 'Enter your name!';
}
//other validation goes here...
if(empty($_FILES['file']['name'])) {
    $errors['file'] = 'upload file!';
}
//other validation goes here...
echo json_encode($errors);

//使用jquery插件初始化文件池
$（“#文件”）.filepond({
allowMultiple:false，
服务器：'http://localhost/'
});
//阿贾克斯
$（“表格”）。在（'submit'，函数（e）{
$.ajax({
url:'send.php'，
键入：“POST”，
数据：新表单数据（本），
数据类型：“JSON”，
contentType:false，
cache:false，
processData:false，
}).完成（功能（数据）{
if（data.success==false）{
if（data.errors.username）{
$（'#username'）.append（''+data.errors.username+''）；
}
if（data.errors.file）{
$（'#file'）.append（''+data.errors.file+''）；
}
}
});
e、 预防默认值（）；
});
//表单标签之间的“我的表单”字段
//php代码验证文件和名称
$errors=[]；
if（空（$\u文件['username']））{
$errors['username']=“输入您的姓名！”；
}
//其他验证在这里进行。。。
if（空（$_文件['file']['name']））{
$errors['file']='upload file！'；
}
//其他验证在这里进行。。。
echo json_编码（$errors）；

编辑： 我注意到插件无法使用/删除输入类型文件中的name属性，每次加载页面时输入ID也会被覆盖

//example the input look like where the id="filepond--browser-men6qus3m" change every time i load new file


<input class="filepond--browser" type="file" id="filepond--browser-men6qus3m" aria-controls="filepond--assistant-men6qus3m" aria-labelledby="filepond--drop-label-men6qus3m" accept="image/png">

//示例：每次加载新文件时，输入的id=“filepond--browser-men6qus3m”都会发生变化

---

因此，为什么我得到了未定义的输入错误和未附加的文件

您将使用Ajax请求发送FormData。这里提到的问题是，您希望包含使用

FilePond

库附加的文件。以下是我将FilePond文件附加到FormData的解决方案：

$（文档）.ready（函数（）{
pond=FilePond.create(
document.querySelector（“#file”）{
allowMultiple:对，
instantUpload:false，
allowProcess:false
});
$（“#上传表格”）。提交（功能（e）{
e、 预防默认值（）；
var fd=新的FormData（本）；
//将文件数组追加到表单数据中
pondFiles=pond.getFiles（）；
对于（var i=0；i

对不起，我编辑了我的question@ubongo我更新了答案，请让我知道它是否有效。它有效，在验证上没有所谓的字段上的未定义名称，但问题是，当我单击按钮提交数据时，它只发送名称，没有发送文件，请查看我的ajax代码，当我忽略名称验证时，删除所有ajax代码，并将filepond选项中的服务器url替换为服务器：“php脚本的名称”它可以工作为什么？当我在控制台上检查表单数据时，只有字段文件没有值，而字段名称具有value@ubongo请尝试更新后的答案。请不要编辑答案来回复。只需在应答器下方的按钮上添加注释，如果您阅读文档，您将看到服务器是相对于您运行js脚本的路径，而服务器api位于该路径。如果端点位于不同的服务器上，则使用http://。否则，

/

将用于同一文件夹，依此类推