Question

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

似乎＆＃39;掉线＆＃39;文件（在我的情况下通过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中看到空白请求标题后，根据快速上传速度，我假设文件没有发送。

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

Answer 2

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

FormData不发送附加文件

2 个答案: