POST不使用AJAX接收formData

Question

我在将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”]！=''）false。

Answer 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";
  }
}