传递一个'拖放'文件转换为php

Pass a 'drag and dropped' file to php

本文关键字：文件 拖放 转换 php 一个      更新时间：2023-09-26

我正在尝试访问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>

由于您已经在使用jQuery，我强烈建议您使用blueimp的jQuery File Upload来完成此任务。以一种在所有（主要）浏览器中都能工作的方式实现这一点是一件痛苦的事情。

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

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

  2. 获取drop 上的数据

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

  3. 通过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);

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

    这意味着你必须满足3种上传文件的方式：

    • HTML表单+文件输入
    • XHR多部分上传
    • XHR非多部分上传

    你自己写可能会很复杂！（示例来自jQuery文件上传源）

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

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

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

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

相关文章：