发送时 Filepond 输入字段未附加表单数据

Question

如何将 FilePond 文件字段与其他表单元素一起上传到服务器。例如，我有一个包含输入字段的表单元素、一个 select 字段、一个文本区域和一个连接到 Filepond 插件的文件输入字段。

<form class="uploadform">
    <input type="text" placeholder="type the title of the document you are uploading">
    <textarea class="textarea" placeholder="type anything here"></textarea>
    <input type="file" class="filepond" name="file[]" multiple>
    <button type="button" class="uploadbtn">Upload Document</button>
</form>

但是每当我尝试上传表单时，文件字段都没有上传到服务器，请帮我解决这个问题。我如何将 FilePond 输入字段绑定到我的表单数据元素？

这是我的jQuery上传代码：

$(".uploadbtn").click(function(){
    var form = document.getElementsByClassName("uploadform")[0] 
    var formdata = new FormData(form)
    $.ajax({
        url: "path/to/php-server-side/request/handler.php",
        data: formdata,
        processData: false,
        contentType: false,
        method:"post"
    }).done(function (response) {...
})

Answer 1

您需要手动将 FilePond 文件附加到 FormData 对象。 FilePond 对象有一个 file 属性，这是原始文件 blob 对象。你可以这样走：

$(document).ready(function(e){
pond = FilePond.create(
    document.querySelector('#file'), {
        allowMultiple: true,
        instantUpload: false,
        allowProcess: false
    });

$("#uploadform").submit(function (e) {
  e.preventDefault();
  var formdata = new FormData(this);
  // append FilePond files into the form data
  pondFiles = pond.getFiles();
  for (var i = 0; i < pondFiles.length; i++) {
      // append the blob file
      formdata.append('file[]', pondFiles[i].file);
  }

  $.ajax({
    url: "path/to/php-server-side/request/handler.php",
    data: formdata,
    dataType: 'JSON',
    processData: false,
    contentType: false,
    method:"post"
  }).done(function (response) {
    // todo
  });
 
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"/>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<form id="uploadform" enctype="multipart/form-data">
<input type="text" placeholder="type the title of the document you are uploading">
<br>
<textarea class="textarea" placeholder="type anything here"></textarea>
<input id="file" type="file" class="filepond" name="file">
<button type="submit" class="uploadbtn">Upload Document</button>
</form>

有了这个，您将获得文件，就好像它们是通过 html 表单发送的一样。

发送时 Filepond 输入字段未附加表单数据

Filepond input field not attached with formdata while sending

javascript

ajax

jquery

file-upload

filepond