Javascript FormData未发送附加文件

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

看起来“drop”文件（在我的例子中是通过jQuery，

.on（'drop'，function（e）{

）文件）实际上并没有被发送

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

不相信我？

（免责声明：显然，我已经修改了我的解决方案，不使用跨域请求，我使用了在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])
    }
  });
});

---

在Chrome中看到空白请求头后，基于快速上传速度，假设文件没有发送。 但是，在将代码添加到后端端点（通过

var\u dump（$\u 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，他说服我仔细检查后端实现，以验证文件是否确实不存在。

我也遇到了同样的问题，这里我需要更新我的

php.ini

文件以增加config

upload\u max\u filesize

的值。您需要检查后端，是bac吗kend收到文件？上载可能会立即完成，因为您的文件太小，并且您在本地进行测试。我正在使用一个相当大的文件进行测试，至少有几兆字节。我在本地进行了测试（显然，这将是即时的，因为我的计算机上已经有了所有文件）-然而，Fiddle实现至少应该尝试传输文件。我不明白为什么边界之间没有文件数据-这是常见的情况吗？Chrome只是忽略了这些信息吗？

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

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)
}