时间戳

首页 > 解决方案 > 使用 Jquery 和 Fetch 将多个文件发送到 PHP

javascript - 使用 Jquery 和 Fetch 将多个文件发送到 PHP

问题描述

我正在使用 Jquery 构建一个 HTML 表单以将数据发送到 PHP 后端。它应该允许多个附件，然后通过fetch. 我收到$_POST罚款，但$_FILES只包含最后选择的文件。

我知道这是因为multiple每次打开新的文件选择器窗口时属性都会重置，但我会在选择每个文件时保存它。为了解决这个问题，我试图捕获 JS 数组中的每个文件，FormData在它发布到服务器之前将数组附加到。

$(document).ready(function(e){
    // Add input files to array
    $('#inputId').on('change', function(e) {
        fileList.push(fileName[0]);
    });

    // Form submission
    $("#formId").on('submit', function(e){
        e.preventDefault();
        formData = new FormData(this);
        formData.append(fileList);
        url = '../php/submit.php';
        fetch(url, {method: 'POST', body: formData})
            .then(function(response) {
                return response.text();
            })
            .then(function(body){
                console.log(body);
            });
    });
});
<form id="formId" enctype="multipart/form-data" method="POST">
  <div class="ds-row ds-file-upload-container ds-mar-b-2">
    <div class="ds-col-xs-12 ds-col-md-6">
      <label for="inputId" class="ds-button">Choose a file
        <input type="file" class="ds-file-upload" name="upload[]" id="inputId" multiple="multiple">
      </label>
    </div>
  </div>
</form>

截至目前，submit单击按钮时表单未提交任何内容。如果我注释掉#inputIdonchange 事件，它可以工作，但当然，它没有包含在FormData.

标签： javascriptphphtmljquery

解决方案

这是适合您的工作代码并经过测试。

formData您在附加方面几乎没有问题。您没有为您的文件执行任何 forEach 操作，因此当您发送获取请求时，您 formData 仅获取最后一个文件。

要存储多个文件，您需要一个空数组，我将其命名为filesToUpload

该数组将存储您将在更改功能上选择的所有文件。

一旦数组包含您要上传的所有文件。在表单提交功能上，您将遍历该filesToUpload数组并将其所有数据附加到formData并通过获取请求发送。

在后端PHP，当您var_dump($_POST)OR时，var_dump($_FILES)您将在那里看到所有这些文件。

工作小提琴演示： https ://jsfiddle.net/woft6grd/

在演示中，当您使用开发工具-> 网络时，您将在表单提交中看到您的请求将包含您通过输入上传的所有文件。

jQuery

$(document).ready(function() {

  // Add input files to array
  var filesToUpload = []

  //On Change loop through all file and push to array[]
  $('#inputId').on('change', function(e) {
    for (var i = 0; i < this.files.length; i++) {
      filesToUpload.push(this.files[i]);
    }
  });

  // Form submission
  $("#formId").on('submit', function(e) {
    e.preventDefault();

    //Store form Data
    var formData = new FormData()
    //Loop through array of file and append form Data
    for (var i = 0; i < filesToUpload.length; i++) {
      var file = filesToUpload[i]
      formData.append("uploaded_files[]", file);
    }

    //Fetch Request
    url = '../php/submit.php';
    fetch(url, {
        method: 'POST',
        body: formData
      })
      .then(function(response) {
        return response.text();
      })
      .then(function(body) {
        console.log(body);
      });
  })
});

HTML

<form id="formId" enctype="multipart/form-data" method="POST">
  <div class="ds-row ds-file-upload-container ds-mar-b-2">
    <div class="ds-col-xs-12 ds-col-md-6">
      <label for="inputId" class="ds-button">Choose a file
        <input type="file" class="ds-file-upload" name="upload[]" id="inputId" multiple="multiple" required>
      </label>
    </div>
  </div>
  <input type="submit" value="Upload" />
</form>

我还为每个代码行添加了注释以突出显示。

推荐阅读