POST 未使用 AJAX 接收 formData答案

【问题标题】：POST not receiving formData with AJAXPOST 未使用 AJAX 接收 formData
【发布时间】：2020-06-24 11:04:57
【问题描述】：

我在将 FormData 发送到 PHP 脚本时遇到问题，当 PHP 脚本获取 POST 时，它会收到空的 $_FILE。

HTML：

 <label class="col-md-4 control-label" for="filebutton">File Button</label>
  <div class="col-md-4">
    <input type="file" name="fileToUpload" id="fileToUpload" accept=".jpg,.jpeg.,.gif,.png,.mov,.mp4">
  </div>

JavaScript：

 const xhr = new XMLHttpRequest();

const videoForm = document.querySelector('#videoForm');
let fileToUpload = videoForm['fileToUpload'].files[0];


var formdata = new FormData();
formdata.append("fileToUpload", fileToUpload);

xhr.onload = function () {
  let serverResponse = this.responseText;
  console.log(serverResponse);

  if(serverResponse === "SUCCESS"){
    //GatherDBData();
  }else{
    alert("Error file was NOT uploaded, check file type");
  }

};


xhr.open("POST", "upload.php");
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(formdata);

PHP：

if($_POST){
  if($_FILES["fileToUpload"]["name"] != '')
  {
    $test = explode('.', $_FILES["fileToUpload"]["name"]);
    $ext = end($test);
    $name = $_FILES["fileToUpload"]["name"];
    $location = '../../VideoDropPoint/' . $name;
    if (file_exists($location)) {}
    if(move_uploaded_file($_FILES["fileToUpload"]["name"], $location)){
      echo "SUCCESS";
    }else{
      echo "ERROR";
    }
    echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';
  }else{
    echo "ERROR no data received";
  }
}

PHP 越过了 if($_POST)，但发现 if($_FILES["fileToUpload"]["name"] != '') 为假。

【问题讨论】：

Content-Type 标头还需要包含用于多部分请求的 boundary 值，但您发送的不是。尝试完全删除该行，AFAIK 浏览器根据正在使用的 XMLHttpRequest 和 FormData 的组合在内部自行处理。
不行还是不行，注释掉setRequestHeader。
如果您只是尝试自行序列化文件输入字段，则不确定这是否应该完全独立工作。试试这里的方法，整个表单通过 FormData 进行序列化，developer.mozilla.org/en-US/docs/Web/API/FormData/… - 并确保您的表单设置了正确的 enctype。
还是空的。

标签： javascript php html ajax post

【解决方案1】：

如下更改你的 JS 代码：

<script>
    document.querySelector('#fileToUpload').addEventListener('change', function(e) {
      var file = this.files[0];

      var fd = new FormData();
      fd.append("fileToUpload", file);
      fd.append("param", "test");

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'test.php', true);

      xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
          var percentComplete = (e.loaded / e.total) * 100;
          console.log(percentComplete + '% uploaded');
        }
      };

      xhr.onload = function() {
        if (this.status == 200) {
          var resp = JSON.parse(this.response);

          console.log('Server got:', resp);

          var image = document.createElement('img');
          image.src = resp.dataUrl;
          document.body.appendChild(image);
        };
      };

      xhr.send(fd);
    }, false);
    </script>

在 PHP 中我已经修复了 move_uploaded_file 和一些 if 条件

if($_POST){
  if($_FILES["fileToUpload"]["name"] != '')
  {
    $test = explode('.', $_FILES["fileToUpload"]["name"]);
    $ext = end($test);
    $name = $_FILES["fileToUpload"]["name"];
    $location =  '../../VideoDropPoint/';
    if (file_exists($location)) {
        print_r($_FILES["fileToUpload"]);
        if(move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $location.$name)){
          echo "SUCCESS";
        }else{
          echo "ERROR";
      } 
    }
    echo '<img src="'.$location.$name.'" height="150" width="225" class="img-thumbnail" />';
  }else{
    echo "ERROR no data received";
  }
}

【讨论】：