FormData 不发送附加文件答案

【问题标题】：FormData not sending appended fileFormData 不发送附加文件
【发布时间】：2017-10-08 16:06:45
【问题描述】：

我正在制作一个支持拖放功能的 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;
}

【问题讨论】：

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

标签： javascript jquery ajax multipartform-data form-data

【解决方案1】：

我遇到了同样的问题，这里我需要更新我的php.ini 文件以增加配置upload_max_filesize 的值。

【讨论】：

【解决方案2】：

在 Chrome 中看到空白请求标头后，基于快速的上传速度，我认为文件没有发送。

但是，在将代码添加到我的后端端点（通过 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 说服我仔细检查后端实现以验证文件是否确实不存在。

【讨论】：