javascript - FormData 不发送附加文件

Question

我正在制作一个支持拖放的文件上传 Javascript 应用程序 - 但我遇到了一个问题，我已经困扰了好几天。

似乎“丢弃”的文件(在我的例子中是通过 jQuery，.on('drop', function(e){) 文件实际上并没有被发送。

我一直在 StackOverflow 上浏览一个又一个答案 - 请不要标记为重复。重复没有帮助 - 我还没有找到我在实现中没有考虑的方面。好像这个解决方案对除我以外的所有人都有效...

不相信我？ <强> FIDDLE HERE

(免责声明:显然我已经修改了我的解决方案以不使用跨域请求，我正在使用我在 Fiddle 上找到的端点作为替代品，但它似乎提出了我一直遇到的相同问题 - 希望作为这个例子的基础就足够了)

问题是上传立即完成 - 显然它只是发送文本数据而不是上传文件本身。查看请求负载，我发现数据不存在。

Javascript

function uploadFile(file){
  console.log("uploadFile");
  var form = new FormData();
  form.append('file', file);
  form.append('hello', 'world');
  $.ajax({
    url: "/echo/js/?js=hello%20world!",
    type: "POST",
    data: form,
    processData: false,
    contentType: false,
    cache: false,
    success: function(data){
      alert("SUCCESS");
    }
  });
}
$(document).ready(function(){

  /* Disable default drag/drop browser behavior. */
  $("html").on('drop', function(e){e.preventDefault(); e.stopPropagation();});
  $("html").on('dragover', function(e){e.preventDefault(); e.stopPropagation();});
  $("html").on('dragenter', function(e){e.preventDefault(); e.stopPropagation();});
  $("html").on('dragleave', function(e){e.preventDefault(); e.stopPropagation();});

  $(".drop_area").on('drop', function(e){
    e.preventDefault(); 
    e.stopPropagation();
    var files = e.originalEvent.target.files || e.originalEvent.dataTransfer.files;
    console.log(files);
    for (var i = 0; i < files.length; i++) {
      uploadFile(files[i])
    }
  });
});

HTML

<div class='drop_area'>
Drop your file in this div.
</div>

CSS

.drop_area {
  border: 1px solid black;
  background: #ffffff;
  height: 300px;
  width: 50%;
  position: relative;
}

Answer 1

在 Chrome 中看到空白的请求 header 后，基于快速的上传速度，我假设文件没有发送。

然而，在将代码添加到我的后端端点之后(通过 var_dump($_FILES['file']);)，我看到了以下内容:

array(5) {
  ["name"]=>
  string(14) "two-minute.mp4"
  ["type"]=>
  string(9) "video/mp4"
  ["tmp_name"]=>
  string(36) "/Applications/MAMP/tmp/php/phpXfCu0U"
  ["error"]=>
  int(0)
  ["size"]=>
  int(12904619)
}

较大的 size 属性似乎表明我上传的数据很多。它可能一直在工作。我明天再看这个，但目前答案可能是:

“它看起来好像无法在您的浏览器中运行，但实际上是......”。

部分归功于@Alisher Gafurov 说服我仔细检查后端实现以验证文件是否确实不存在。