Question

我正在尝试访问php中的上传文件。我有两种方式可以让用户上传文件。可以拖放，也可以点击上传。我正在使用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>

Answer 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）

Answer 2

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

要调试脚本，请添加一行执行alert（）函数的JavaScript / jQuery，并显示id为“openfile”的元素的值。在表单提交时将其放在事件触发器中。

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

Answer 3

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

将“拖放”文件传递给php

JSFiddle

3 个答案: