将“拖放”文件传递给 php答案

【问题标题】：Pass a 'drag and dropped' file to php将“拖放”文件传递给 php
【发布时间】：2015-11-19 02:13:10
【问题描述】：

我正在尝试在 php.ini 中访问上传的文件。我有两种用户可以上传文件的方式。既可以拖放，也可以点击上传。我正在使用 ajax 将数据传递给 php。我在 JQuery 中访问文件的方式是

new FormData($('#uploadform')[0])

然后在php中我做了print_r($_FILES)。当用户点击上传时，它会以应有的方式打印出来。但是当用户拖放文件时，它会打印出以下内容：

Array
(
    [img] => Array
        (
            [name] => 
            [type] => 
            [tmp_name] => 
            [error] => 4
            [size] => 0
        )

)

我也试过（用于拖放）

evt.originalEvent.dataTransfer.files[0];

我得到了一个完全空的数组。

如何将“拖放”图像传递给 php？

JSFiddle

$(document).ready(function() {
  "use strict";

  $('#uploadform').on('change', function(evt) {

    var formData = new FormData($(this)[0]);

    $.ajax({
      url: $(this).attr("action"),
      context: document.body,
      data: formData,
      type: "POST",
      timeout: 15000,
      contentType: false,
      processData: false,
      success: function(data) {
        // Perform something upon success
      },
      error: function(jqXHR, textStatus) {
        // Perform something upon error
      }
    });
    return false;
  });

  $('#lbl').on('dragover', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
  });

  $('#lbl').on('drop', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var formData = new FormData($(this)[0]);

    // Also tried:
    // var formData = evt.originalEvent.dataTransfer.files[0];

    $.ajax({
      url: $('#uploadform').attr("action"),
      context: document.body,
      data: formData,
      type: "POST",
      timeout: 15000,
      contentType: false,
      processData: false,
      success: function(data) {
        // Perform something upon success
      },
      error: function(jqXHR) {
        // Perform something upon error
      }
    });
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
  <label for="openFile" name="lblImage" id="lbl"></label>
</form>

【问题讨论】：

标签： javascript php jquery ajax forms

【解决方案1】：

由于您已经在使用 jQuery，我强烈建议您使用 blueimp's jQuery File Upload 来完成这项工作。以一种适用于所有（主要）浏览器的方式实现这一点很痛苦。

如果你坚持自己做，以下步骤是必要的：

取消dragover 和 dragenter事件（preventDefault + stopPropagation）

获取drop上的数据

$('#uploadform').on('drop', function (ev) {
  if (ev.originalEvent.dataTransfer && ev.originalEvent.dataTransfer.files.length) {
    ev.preventDefault();
    ev.stopPropagation();
    upload(e.originalEvent.dataTransfer.files);
  }
});

通过 XHR 上传文件

var formData = new FormData();
for (var i = 0, file; file = files[i]; ++i) {
  formData.append(file.name, file);
}

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload.php', true);
xhr.onload = onUploadCompleted;
xhr.send(formData);

在 PHP 后端以不同方式处理通过 XHR 上传的文件

也就是说你必须满足3种上传文件的方式：
- HTML 表单 + 文件输入
- XHR 分段上传
- XHR 非分段上传
你自己写这可能很复杂！ (Example from the jQuery-File-Upload source)

【讨论】：

你能给我看一个 JSFiddle 吗？还有，为什么我不能用ajax？
用于 jQuery 文件上传的 JSFiddle？ demo page of the project 有足够多的演示，示例代码（也适用于 PHP！）包含在下载中。
“另外，为什么我不能使用 ajax？”：在前端，从概念上讲，“AJAX”和“使用 XHTMLHttpRequest”是一回事。您上传文件不是通过使用 POST 请求切换到其他站点，而是通过XHTMLHttpRequest“在后台”发送文件。
哦。我以为你是在告诉我切换到 xhr，而不是使用 ajax。你能给我看一个你给我看的 JSFiddle 吗
JSFiddle:jsfiddle.net/rc8vjew6/1 - 对于 PHP 方面，请阅读我的回答的第 4 点。我真的建议使用提到的插件来完成这项工作。

【解决方案2】：

PHP $_FILES 数组将从“文件”类型的所有表单元素中获取值。

要调试您的脚本，请粘贴一行 JavaScript/jQuery，它执行 alert() 函数并显示 id 为“openfile”的元素的值。提交表单时将其置于事件触发器中。

可能是此拖放功能未设置该文件表单字段的值。如果没有，那么我们将不得不寻找其他方法来实现拖放功能或将文件获取到 PHP。

【讨论】：

我已经检查过了。 JavaScript 正在获取文件。另外，我认为这应该是一个评论。这不是答案。
$_FILES 数组中的错误“4”是什么？也许权限或文件名/路径的格式无效或类似？看起来拖放处理的事情与原生 HTML 输入略有不同。您是否有权访问此拖放小部件的来源？或者可以换吗？
对你最后的问题是肯定的
您会上传拖放小部件的源代码还是数百行？
我给了你我所有的一切。它在 JSFIddle 中

【解决方案3】：

遇到同样的问题。调试此类行为并非易事，但请尝试检查 PHP ini 设置 upload_max_filesize - 如果它小于所有文件大小的总和，则 PHP 将不会接受所有文件，只会打印空数组。

【讨论】：